複数のクラスをターゲットにするためにjQueryを使用する

Question

私はこの選択可能な入力フォームを動的に追加および削除できるjQueryコードを用意しています。

$(document).ready(function() { 
    var max_fields = 20; //maximum input boxes allowed 

    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 
    var x = 1; //initlal text box count 
    $(add_button).click(function(e) { //on add input button click 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     $(".aaaa").first().clone().appendTo(".input_fields_wrap"); 
     } 
    }); 
    $(wrapper).on("click", ".remove_field", function(e) { 
     e.preventDefault(); 
     if($(".aaaa").length > 1) { 
     $(this).parent('div').remove(); 
     } else { 
     alert('You can not delete all elements'); 
     } 
    }) 
}); 

このjQueryコードを多くのクラス（class="input_field_wrap and etc."）に使用したいと考えています。

私はそれを動作させるために見ることができる唯一のことは、onclick機能としてそれを作ることです？

function createSelect(wrapper, add_button, a) { 
var max_fields = 20; 
var x = 1; 
$(add_button).click(function(e) { //on add input button click 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     $(".aaaa").first().clone().appendTo(".input_fields_wrap"); 
     } 
    }); 
} 

これは機能しません。

HTML：

<div class="input_fields_wrap"> 
         <a href="#" class="add_field_button" >Add Another Prescibed Medication</a> 
         <div class="aaaa"> 
          Prescibed Medication Name: 
          <select class="form-control" name="prescription[]"> 
           <option value="">Select an option</option> 
           <?php 

          foreach($prescription->result() as $row) 
          { 
           echo '<option value="'.$row->id.'">'.$row->name.'</option>'; 
          } 

          ?> 

          </select> 

          <a href="#" class="remove_field">Remove</a> 
         </div> 
        </div> 

Answer 1

あなただけの新鮮なDOMに対処するためのイベント委任on()を使用するようにあなたが.remove_fieldの前のクリックイベントにそうであるように、それがされる動的に追加しました：

$('body').on('click', '.add_field_button', function(e) { 
    e.preventDefault(); 

    if (x < max_fields) { //max input box allowed 
    x++; //text box increment 
    $(".aaaa").first().clone().appendTo(".input_fields_wrap"); 
    } 
}); 

これが役に立ちます。