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。如果你试图绑定你不存在的“数据微调器”，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 website。

Jquery .on没有观察加载后添加的新元素

3 个答案: