Question

在我正在创建的应用程序中，我正在对服务器进行几次AJAX调用，并用部分视图替换部分页面。除了使用jQuery replaceWith()函数“替换”的按钮外，一切似乎都正常工作。

在我的实际代码中，我正在替换整个<div>而不仅仅是一个按钮，但代码found here将有助于说明我的问题。

单击该按钮时，将调用JavaScript，然后更新该按钮。但是，尝试再次单击该按钮，将不会调用或执行相同的JavaScript。这里有一些我失踪的脱节。（在我看来，每次点击一个“updateButton”类的按钮时，都应该执行javascript。）请帮帮我。

由于

Answer 1

活动代表团。

$(document).on('click','.updateButton',function (e) {
            e.preventDefault();
    var now = new Date().getTime();

   var newButton = "<span class='btn btn-info updateButton'>Update Button " + now + "</span>"

    $(this).replaceWith(newButton);
});

演示：http://jsfiddle.net/D2RLR/896/

不是将事件绑定到将被删除的按钮（从而丢失事件绑定），而是将其绑定到一个不被删除但是该按钮的祖先的元素。

Answer 2

不是在文档上绑定事件处理程序（如在Kevin B的答案中），而是将其重新绑定到您创建的新按钮以替换旧按钮。这是一种更有效的事件处理方法，因为在事件触发之前，事件不需要将DOM树一直冒泡到文档中。

http://jsfiddle.net/D2RLR/900/

var replaceBtn = function(domBtn,e) {
   e.preventDefault();
   var now = new Date().getTime();

   var newButton = $("<span class='btn btn-info updateButton'>Update Button " + now + "</span>");
    newButton.on('click',function(event) {
        replaceBtn(this,event);
    });

    $(domBtn).replaceWith(newButton);

}

$('.updateButton').click(function(event) {
     replaceBtn(this,event)
});

jQuery replaceWith（）后JavaScript断开连接

2 个答案: