0

我有以下 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();
});
4

3 回答 3

2

你试过像

$("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();
});
于 2013-09-11T13:29:55.887 回答
1
$(document).on('ajax:before', '*[data-spinner]', function(e) {
    $('#' + $(e.target).data('spinner')).show();
});

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

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

于 2013-09-11T13:33:43.603 回答
0

它应该是这样的

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

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

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

原型是

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

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

于 2013-09-11T13:30:54.483 回答