脚本不适用于加载的元素

Script does not working for loaded element

本文关键字：元素 加载 适用于 不适用 脚本      更新时间：2023-09-26

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

<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);
           }
      }
 );

Toggle检查不仅仅适用于加载/附加的元素。

如何解决此问题如何正确创建一个影响所有元素的脚本，即使是加载的元素

谢谢。

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

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

尝试这个轻微的修改：

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

让我知道进展如何。

相关文章：