0

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

在我的实际代码中，我不仅要替换一个按钮，而且要替换整个按钮，但此处找到<div>的代码将有助于说明我的问题。

单击按钮时，将调用 JavaScript，从而更新该按钮。但是，尝试再次单击该按钮，将不会调用或执行相同的 JavaScript。这里有一些我错过的断开连接。（在我看来，每次单击带有“updateButton”类的按钮时，都应该执行javascript。）请帮帮我。

谢谢

4

2 回答 2

2

事件委托。

$(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/

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

于 2012-07-27T19:55:10.473 回答
0

无需在文档上绑定事件处理程序（如 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)
});
于 2012-07-27T20:00:36.617 回答