Question

我用checkbox + wrapper创建了一个表单，即：

<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

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

您可以单独绑定新的点击次数，也可以将侦听器委托给将留在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);
});

让我知道它是怎么回事。

脚本不适用于已加载的元素

2 个答案: