Question

我在页面div块上：

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

和js with click handler：

$('.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时，使用新的 div.newBtn 从 service1 HTML返回。 jQuery对话框窗口中显示的新HTML。当用户关闭对话框窗口并通过单击 div.btn 再次打开它，然后单击div.newBtn =＆gt; div.newBtn上的click-event运行两次。如何在div.newBtn上运行click-event，而不依赖于用户打开jQuery对话窗口的次数?????

Answer 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已经被弃用了很长时间。如果可能，我会切换到开/关

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

如何从servise resnonse中停止多个事件处理程序onclick on html？

2 个答案: