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

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 9 年前。

我创建了一个带有复选框+包装器的表单，即:

<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

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

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