如果ajax请求完成，则调用函数

Question

我有一个按钮和2个链接，它们发出了ajax请求。 如果按按钮调用的请求完成，我想显示警报。 但是，如果我单击某些链接，则不想显示警报。 这是我的代码：

HTML：

<button id="ajax">Ajax</button>
<a href="#">link 1</a>
<a href="#">link 2</a>

<div></div>

JS：

$('#ajax').click(function() {
    $("div").load("/echo/js/?js=button");

    $( document ).ajaxStop(function() {
        alert('alert')
    });
})

$('a').click(function() {
    $("div").load("/echo/js/?js=link");
})

http://jsfiddle.net/rgyxzwj6/

为什么如果我单击按钮，然后单击某些链接，它会显示警报？ 第一次单击按钮后，它仅显示一次警报。 但是，如果我第二次单击该按钮，它将两次显示警报。 我该如何解决？

Answer 1

1.执行警报

您应该使用jquery load的回调函数执行警报：

$('#ajax').click(function() {
    $("div").load("/echo/js/?js=button", function() {
        alert('alert');
    });
});

$('a').click(function() {
    $("div").load("/echo/js/?js=link");
});

回调功能

如果提供了“完成”回调，则在后处理和HTML插入完成后执行该回调。 jQuery集合中的每个元素都会触发一次回调，并将其依次设置为每个DOM元素。

从jquery API以及有关load()更多信息： http : //api.jquery.com/load/

这是您的情况更新的小提琴： http : //jsfiddle.net/55rpfe0w/

2. ajaxStop处理程序

您的代码...

$( document ).ajaxStop(function() {
    alert('alert')
});

...当您使用链接执行ajax请求时，也会调用事件处理程序。

每当Ajax请求完成时，jQuery都会检查是否还有其他未完成的Ajax请求。 如果没有剩余的内容，jQuery将触发ajaxStop事件。

从jquery API： https : //api.jquery.com/ajaxStop/

3.多重时间警报

第一次单击按钮后，它仅显示一次警报。 但是，如果我第二次单击该按钮，它将两次显示警报。 我该如何解决？

原因是，您在click函数中设置了事件ajaxStop的处理程序，并且每次在按钮上单击时都设置了另一个事件处理程序，因此：

此时，将执行已向.ajaxStop（）方法注册的所有处理程序。

从jquery API： https : //api.jquery.com/ajaxStop/

Answer 2

您可以将一个函数作为第二个参数传递给load函数，当load函数完成时，将调用此传递的函数。

如果您不希望任何函数运行，则无需传递任何东西，就像在$('a').click函数中所做的那样。

http://jsfiddle.net/rgyxzwj6/1/

$('#ajax').click(function() {
    $("div").load("/echo/js/?js=button", function() {
      alert('alert');
    });
})

$('a').click(function() {
    $("div").load("/echo/js/?js=link");
})