Question

我有一些JavaScript代码将点击事件绑定到某些元素点击事件，如下所示。

    $(".alert-message .close").click(function(e) {
    $(this).parent().fadeTo(200, 0, function() {
        $(this).slideUp(300);
    });
    e.preventDefault();
});

这是在文档就绪事件中调用的，因此通常它会正常工作，直到我触发更新页面部分的ajax请求。这个新创建的部分没有添加点击事件，我最终不得不为每个ajax请求调用此代码，导致大量重复。

我正在寻找一种编写此JavaScript代码的方法，并且可以在任何场景中调用它。是否有一些事件处理程序将在任何ajax或正常请求后调用？

在任何ajax请求之后，

Bootstrap dismissable alert message工作，所以必须有办法。

Answer 1

使用事件委派并将事件绑定到未重新创建的.alert-message .close父级：

$(document).on('click', ".alert-message .close", function(e) {

Answer 2

根据您使用的jQuery版本，您应该使用delegate或on而不是直接绑定点击。尝试像

这样的东西

$(document).on('click', '.alert-message .close', function(e) {
    $(this).parent().fadeTo(200, 0, function() {
        $(this).slideUp(300);
    });
    e.preventDefault();
});

http://api.jquery.com/on/

Answer 3

而不是那样，您可以使用on：

$(parentDivOrContainer).on('click', ".alert-message .close", function(){...});

parentDivOrContainer可以是任何不受ajax调用影响的容器元素。

如何在每次ajax或完整请求后调用javascript

3 个答案: