Как добавить несколько входов с разными именами?

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>