嵌套 jQuery onClick 事件处理程序多次触发

Question

使用 bootstrap 模态，我想为模态和此模态内的后续提交按钮注册一个事件处理程序。

调用模态和关闭 ist 随后会导致多次执行 #modalSubmitButton 事件。你能想出任何解决方案来防止这种行为并且只在实际事件上触发，而忽略之前对模态的调用吗？我嵌套处理程序的方法可能是错误的吗？

我已经尝试了 event.stopPropagation / event.unbind() 等的所有组合

$(document).on('click', '#myModalID' function () {

    // i fetch some data from the clicked element here
    //  and make it accessible to the subsequent eventHandler

        $(document).on('click', '#modalSubmitButton' function () {

            // eventually calling service on click of button
            invokeService()
    });
});

Answer 1

简单修复：不要嵌套事件处理程序。有了委托事件处理程序（您已经在使用）的实现，就没有必要了。

$(document).on('click', '#myModalID' function () {
    // i fetch some data from the clicked element here
    //  and make it accessible to the subsequent eventHandler
});

$(document).on('click', '#modalSubmitButton' function () {
    // eventually calling service on click of button
    invokeService()
});

嵌套 jQuery onClick 事件处理程序多次触发

Nested jQuery onClick event handler fires multiple times

jquery

nested

modal-dialog

propagation

twitter-bootstrap