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的上一次点击事件中一样，它将是：< / p>

$('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" );
    }
});

希望这有帮助。

使用jQuery来定位多个类

1 个答案: