使用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

您只需使用事件委托on()來處理動態添加的新DOM，就像在.remove_field的上一個click事件中.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" );
    }
});

希望這可以幫助。