Question

一个Fiddle胜过千言万语。

<div id="test-container" class="container-fluid">
    <input id="enableButtonCheck" type="checkbox" name="enableButton"/>Enable that button -->
    <i id="targetButton"class="disabled btn btn-sm btn-primary">Button</i>
</div>


 $('#test-container').on('click', '#targetButton', function(e) {
        alert('Hello, I\'m target button.');
    })
    $('#enableButtonCheck').on('click', function(e) {
        $('#targetButton').toggleClass('disabled', !$("#enableButtonCheck").is(":checked"));
    })

所有作品都是小提琴。这也曾经在我的应用程序之前工作，但在最后几次提交后它停止了。所以我想它会以某种方式与我项目的其他部分进行交互。我有相同版本的Bootstrap和Jquery，所有其他jquery / bootstrap函数都很好用。

如果我将处理程序直接附加到按钮，它会再次起作用。

$('#targetButton').on('click',function(e){
  alert('Hello, I\'m target button.');
})

有人可以告诉我哪种交互可以防止父事件处理程序被触发？

UPD。似乎我有这个代码阻止处理程序触发。谢谢你的建议。

$('.disabled').on('click',function clickDisabled(event) {
    event.preventDefault();
    event.stopPropagation();
})

~~但我不明白为什么，因为......~~

UPD2：我发现我需要使用委托事件处理程序而不是静态来防止.disabled类上的事件。例如：

$('.disableds-static-parent').on('click', 'disabled', function clickDisabled(event) {
        event.preventDefault();
        event.stopPropagation();
})

来自this回答。

附加到动态启用元素的父级的Jquery处理程序在我的应用程序中停止工作

0 个答案: