javascript - 脚本不适用于加载的元素

Question

我用复选框+包装器创建了一个表单，即：

<form>
  <div class="input-wrapper">
      <input type="checkbox" name="item[]" value="1">
  </dv>
  <div class="input-wrapper">
      <input type="checkbox" name="item[]" value="2">
  </div>
  <div class="input-wrapper">
      <input type="checkbox" name="item[]" value="3">
  </div>
</form>

这个切换检查正在工作：

$(".input-wrapper").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

但是当我从ajax加载其他复选框时，即：

$.post(
     '/my/url',
     {...my data...},
      function(data){
           if(data != 'failed'){
               //return new checkbox + wrapper too and append it at the end of the form
                $('form').append(data);
           }
      }
 );

切换检查不适用于加载/附加的元素。

如何解决这个问题？如何正确创建一个脚本，即使对于加载的元素也会影响所有元素？

谢谢。

Answer 1

您绑定点击侦听器的方式将绑定到.input-wrapper当前在 DOM 中的所有元素。

您可以单独绑定新的点击，或者将侦听器委托给将留在 DOM 中的父对象（例如$(document).on("click", ".input-wrapper", function (){//Do Stuff});）

Answer 2

试试这个轻微的修改：

$("form").on("click", ".input-wrapper", function () { 
    var $checkbox = $(this).find(':checkbox');
    $checkbox.prop('checked', !$checkbox[0].checked);
});

让我知道情况如何。