名前の異なる複数の入力に追加するにはどうすればよいですか？

Question

私は、異なる名前の複数の入力テキストを持っています。私は彼らによく働いている新しいテキストボックスを追加します。 問題はすべての入力テキストフィールドの名前が異なるためです。

1つの関数を使用し、入力ごとに関数を作成する必要はありません。

私はあなたが複数のクラスに同じイベントを作成することができます追加の特異性を好きならあなただけの代わりに$(wrapper3)

の$(document)を使用することができ、簡単な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

を作りました。

オプション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>