如何从服务响应中停止多个事件处理程序 onclick html？答案

【问题标题】：How to stop multiple event handler onclick on html from servise resnonse?如何从服务响应中停止多个事件处理程序 onclick html？
【发布时间】：2015-08-03 03:22:54
【问题描述】：

我在页面上有 div 块：

<div class='btn'>click here</div>
<div class='dialogWindow'></div>

和带有点击处理程序的 js：

$('.btn').live('click', function(){
    $.ajax({
        type: "POST",
        url: "services/service1.php"        
    }).done(function(result) {
        $('.dialogWindow').empty().append(result).dialog();
        // Handler for btn in HTML from service1
        $('.newBtn').live('click', function(){
            alert('click on new btn');
        });
    });
});

来自 service1 的 HTML：

<div class='newBtn'>click here</div>

当用户点击 div.btn ajax 从 service1 HTML 中返回新的 div.newBtn。 jQuery 对话框窗口中显示的新 HTML。当用户关闭对话框窗口并通过单击 div.btn 再次打开它，然后单击 div.newBtn => click-event on div.newBtn 运行两次。如何在 div.newBtn 上运行 click-event 仅不依赖于用户打开 jQuery 对话框窗口的次数??????

【问题讨论】：

在live of .newbtn 中尝试event.stopImmediatePropagation?！
与“stopImmediatePropagation”的结果相同。不工作。
我不确定您的情况，但event.stopImmediatePropagation 有效。请参阅此DEMO
我把它放在正确的地方是错误的。作品:)
太棒了！！快乐编码.. :)

标签： javascript jquery html ajax jquery-ui

【解决方案1】：

我认为您的问题是每次单击 btn 时都会将新的事件处理程序附加到 newBtn。

如果您在按钮上没有任何其他事件处理程序 - 您的代码可以在附加新的点击处理程序之前删除现有的点击处理程序（有点像这样）

$('.btn').live('click', function(){
    $.ajax({
        type: "POST",
        url: "services/service1.php"        
    }).done(function(result) {
        $('.dialogWindow').empty().append(result).dialog();
        // Handler for btn in HTML from service1
        $('.newBtn').die( "click" );
        $('.newBtn').live('click', function(){
            alert('click on new btn');
        });
    });
});

此外，我不确定您正在为哪个版本的 jquery 开发，但 .live 已经被弃用了很长时间。如果可能的话，我会切换到开/关

【讨论】：

【解决方案2】：

将处理程序附加到事件承诺之外可能更有效：

$('.dialogWindow').on('click','.newBtn', function(){
    alert('click on new btn');
});
$('.btn').on('click', function(){
    $.ajax({
        type: "POST",
        url: "services/service1.php"        
    }).done(function(result) {
        $('.dialogWindow').empty().append(result).dialog();
    });
});

【讨论】：