javascript - Jquery .on 不观察加载后添加的新元素

Question

我有以下 jQuery 代码，它监视 ajax 请求，然后在请求开始/结束时显示/隐藏微调器图像。

这在页面加载时效果很好。但是，如果我使用新的 ajax 链接更新页面的一部分，则此代码不再捕获ajax:before. 有谁知道是否有解决方案而不必调用 unbind() 然后再次调用代码？

$("*[data-spinner]").on('ajax:before', function(e) {
    $('#' + $(e.target).data('spinner')).show();
});

$("*[data-spinner]").on('ajax:complete', function(e) {
    $('#' + $(e.target).data('spinner')).hide();
});

Answer 1

你试过像

$("body").on("'ajax:before", "*[data-spinner]", function(){
 $('#' + $(e.target).data('spinner')).show();
});

$("body").on('ajax:complete', "*[data-spinner]", function(e) {
    $('#' + $(e.target).data('spinner')).hide();
});

Answer 2

$(document).on('ajax:before', '*[data-spinner]', function(e) {
    $('#' + $(e.target).data('spinner')).show();
});

这是因为 jQuery 将其函数绑定到页面加载时的 DOM。如果您尝试绑定尚未存在的“data-spinner”，jQuery 将找不到它并且不会绑定它。

但是，如果您在文档上绑定，则可以找到它，并且我们将您的 '*[data-spinner]' 作为第二个参数传递，因为它只是一个过滤器。只有当您单击“文档”中的某些内容时，jQuery 才会查看它，因此它始终是最新的。

Answer 3

它应该是这样的

$(document).on("ajax:before", "*[data-spinner]", function(){
    //...
});

或者您可以使用父元素而不是文档，它更好/更快，即

$('#parent_element').on("ajax:before", "*[data-spinner]", function(){
    //...
});

原型是

.on( events [, selector ] [, data ], handler(eventObject) )

在jQuery 网站上阅读更多内容。