javascript - 如果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");
});

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

来自 jquery API 和有关 load() 的更多信息:http://api.jquery.com/load/

这是您案例的更新 fiddle :http://jsfiddle.net/55rpfe0w/

<强>2。 ajaxStop 处理程序

你的代码...

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

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

Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event.

来自 jquery API:https://api.jquery.com/ajaxStop/

3.多次提醒

And after first click on the button it shows alert only once. But if I click on the button second time, it shows alert two times. How can I fix that?

原因是，您在点击函数中为事件 ajaxStop 设置了处理程序，并且您在按钮上进行的每次点击都设置了另一个事件处理程序，因此:

Any and all handlers that have been registered with the .ajaxStop() method are executed at this time.

来自 jquery API:https://api.jquery.com/ajaxStop/