javascript - 当删除和添加 html 元素时，Jquery 代码停止工作

Question

如果没有选中任何复选框，我有以下 jquery 代码禁用按钮。否则，该按钮是可按下的。

这里是 jquery 代码:

$(function() {
 var checkboxes = $(':checkbox').click(function(event) {
 $('#group-edit-submit').prop("disabled", checkboxes.filter(':checked').length === 0);
 });

});

因此，当没有选中任何复选框时，它会继续禁用#group-edit-submit 按钮。以下是按钮标签:

<div id="group-edit-submit-wrapper">
   <input disabled id="group-edit-submit" type="submit" name="submit" value="Edit selected members" >
</div>

这是复选框标签:

<div>
   <input id="checkbox1" type="checkbox">
</div>
<div>
   </input id="checkbox2" type="checkbox">
</div>

在这种情况下工作正常。该按钮最初是禁用的。单击其中一个复选框时，将启用该按钮。

但是，当某个复选框被某个事件删除时，标签将变为:

<div>
   <input id="checkbox1" type="checkbox">
</div>

在这种情况下，即使选中了复选框，按钮也会永久禁用，除非重新加载页面。由于某种原因，当标签发生变化时，脚本无法检测到现有的复选框。

如何在不重新加载页面的情况下修复脚本？是否可以？有什么想法吗？

问候

补充说明:

大家好， 事实证明，当整个 div 被 jquery html 函数替换时，未检测到复选框选择器。

考虑以下我从 tbh 借用的 HTML 代码:

<div id="group-edit-submit-wrapper">
  <input disabled id="group-edit-submit" type="submit" name="submit" value="Edit selected members" >
</div>
<div id="some_container">
  <div>
    <input id="checkbox1" type="checkbox">
  </div>
  <div id="cbHolder">
    <input id="checkbox2" type="checkbox">
  </div>
</div>
<input class="toggle" type="button" value="Toggle Checkbox">

问题中的元素在#some_container div 中。因此，它具有以下切换元素的 javascript。当它命中时，整个#some_container 将被替换为 jquery html() 函数:

$(function() {
   var checkboxes = $('input:checkbox').on('click',
     function(event) {
        $('#group-edit-submit').prop("disabled",checkboxes.filter(':checked').length === 0);
      });

     var toggle= true;
     $('.toggle').on('click',function(){
       toggle = !toggle;
       if(toggle){
         $('#some_container').html('<div><input id="checkbox1" type="checkbox"></div><div id="cbHolder"><input id="checkbox2" type="checkbox"></div>');
       }else {
         $('#cbHolder').remove();
     }
  });
});

无论我们如何编写“禁用复选框”功能，该问题都会出现。知道如何解决这个问题吗？

Answer 1

编辑:在 OP 的新评论之后，此更改将修复它:

function SetupCheckboxClick() {
     $('input:checkbox').on('click', function(event) {
        $('#group-edit-submit').prop("disabled",$('input:checkbox').filter(':checked').length === 0);
      });
}
$(function() {
     SetupCheckboxClick();

     var toggle= true;
     $('.toggle').on('click',function(){
       toggle = !toggle;
       if(toggle){
         $('#some_container').html('<div><input id="checkbox1" type="checkbox"></div><div id="cbHolder"><input id="checkbox2" type="checkbox"></div>');
         SetupCheckboxClick();
       }else {
         $('#cbHolder').remove();
     }
  });
});