如何附加到具有不同名稱的多個輸入？

Question

我有不同名稱的多個輸入文本。我追加到他們添加一個新的文本框工作正常。 由於所有輸入文本字段具有不同的名稱，因此會出現問題。

我怎樣才能使用一個函數來工作，而不必爲每個輸入創建一個？

我做了一個簡單的https://jsfiddle.net/ke6br8xj/

$(document).ready(function() { 
    var max_fields3  = 30; //maximum input boxes allowed 
    var wrapper3   = $(".input_fields_wrap12"); //Fields wrapper 
    var add_button3  = $(".add_field_button11"); //Add button ID 
    var wrapper6   = $(".input_fields_wrap11"); //Fields wrapper 
    var x = 1; //initlal text box count 
    $(add_button3).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields3){ //max input box allowed 
      x++; //text box increment 
      $(wrapper3).append('<div> <input type="text" class="pets" name="super_stars_winner#CurrentRow#" size="35" > <a href="#" class="remove_field"> Remove</a></div>'); //add input box 


     } 
      $(document).ready(function() { 
     $('.pets').autocomplete({ 
      source: function(query, response) { 
       $.ajax({ 
        url: "search.cfc?method=queryNames&returnformat=json", 
        dataType: "json", 
        data: { 
         searchPhrase: query.term 
        }, 
        success: function(result) { 
         response(result); 
        } 
       }); 
      } 
     }); 
    }); 
    }); 

    $(wrapper3).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); 
     x--; 
    }) 
    $(wrapper6).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); 
     x--; 
    }) 
}); 

Answer 1

你可以只用$(document)代替$(wrapper3)

如果你想添加的特異性可以創建多個類相同的事件。

選項1

$(document).on('click', '.remove_field', function(e){ 
    //any class with .remove_field will trigger when clicked 
}); 

選項2

$(document).on('click', '.input_fields_wrap12 .remove_field, .input_fields_wrap11 .remove_field', function(){ 
    //either an element with .remove_field as a child of .input_fields_wrap12 
    //or .input_fields_wrap11 will jump in here when clicked 
}); 

注意,在第二個選項。它在選擇器引號''內。您使用它來選擇多個字段來執行相同的事件功能

Answer 2

以下允許事件冒泡形成級別。然後它將更改應用於觸發事件的按鈕的父div（$ parent）。

$('form').on('click', function ($event) { 
 
    $event.preventDefault(); 
 
    var $target = $($event.target); 
 
    var $parent = $target.parent(); 
 
    if ($target.hasClass('Add')) { 
 
     var $div = $('<div>').insertAfter($parent); 
 
     $parent.clone().appendTo($div); 
 
    } else { 
 
     $parent.remove(); 
 
    } 
 
});

<form> 
 
     <div> 
 
      <input type="text" /> 
 
      <button class="Add">Add</button> 
 
      <button class="Remove">Remove</button> 
 
     </div> 
 
    </form> 
 
    <form> 
 
     <div> 
 
      <input type="text" /> 
 
      <button class="Add">Add</button> 
 
      <button class="Remove">Remove</button> 
 
     </div> 
 
    </form> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>