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

回调功能

如果＆＃34;完成＆＃34;提供回调，之后执行   已经执行了后处理和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.多次提醒

首次点击按钮后，它只显示一次警报。但如果我第二次点击按钮，它会显示两次警报。我怎么能够解决了吗？

原因是，您在点击功能中设置事件ajaxStop的处理程序，并且您在按钮上执行的每次单击都设置了另一个事件处理程序，因此：

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

来自jquery API的

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

Answer 2

You can pass a function as the second parameter to the load function, this passed function will get called when the load function completes.

如果您不想运行任何函数，则不必将其传递给任何函数，就像您在$('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");
})

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

2 个答案: