Question

这是我的功能：

$(".link").click(function(event){
    event.preventDefault();
    event.stopPropagation();
    pageLoad = $(this).data('page');
    $('div#loading').fadeIn();
    $('div#content').load('pages/'+pageLoad);
});

我的页面上有一个带有id内容的div，它显示了被调用的页面，但它似乎加载了两次页面。我知道这是因为其中一个页面以洗牌的顺序显示了一些内容，我可以看到它加载了两次。有趣的是，当我添加

时，它工作正常

throw new Error('something here');

到函数的末尾，如下所示：

// LINK CLICK
$(".link").click(function(event){
    event.preventDefault();
    event.stopPropagation();
    pageLoad = $(this).data('page');
    $('div#loading').fadeIn();
    $('div#content').load('pages/'+pageLoad);
    throw new Error('bla bla');
});

但是其他任何事情都会导致它发射两次。我尝试重新排列等等，但它仍然存在。我使用此功能的链接很简单：

<a href="#" class="link" data-page="whatever.php">link</a>

只调用了一个jQuery 1.7.2实例。我不知道该怎么做。我也尝试了live（）和on（）函数，并经历了完全相同的结果。

!!!编辑!!!

$(".link").click(function(event){
    event.preventDefault();
    event.stopPropagation();
    pageLoad = $(this).data('page');
    console.log('clicked');
    $('div#loading').fadeIn(function() {
        console.log('faded');
        $('div#content').load('pages/'+pageLoad+'.php', function() {
            console.log('loaded');
        });
    });
});

现在......这里真的很有趣。我没有改变我的一个链接

data-page="page.php"

到

data-page="page"

（因为.php现在直接包含在函数中）

当我点击任何应该按预期工作的链接时，我会加载，点击，然后在我的错误控制台中淡出。每个只有一个。页面加载两次。但是，当我点击不应该工作的链接（因为它包含.php）时，它仍然工作！我在错误控制台中得到了三个单词和错误，如下所示：

layout.js:25 clicked
layout.js:27 faded
jquery.min.js:4 GET pages/login1.php.php 404 (Not Found)
layout.js:29 loaded

但页面仍会在内容div中加载我每次点击它，它只加载一次它应该...

因此，根据我在此处建立的内容，当我点击链接时jquery获取page.php和page.php.php时会出现一些奇怪的现象

<a href="#" class="link" page="login1.php">

当我尝试使用以下链接获取甚至不在我的服务器上的页面时，会显示证据：

<a href="#" class="link" data-page="no">no</a>

，我遇到了2个错误：

jquery.min.js:4 GET pages/no 404 (Not Found)
jquery.min.js:4 GET pages/no.php 404 (Not Found)

这怎么可能？为什么jquery会这样做？有人甚至可以尝试解释这里发生了什么吗？

Answer 1

找出发生这种情况的最佳方法（看起来你似乎已尽力阻止事件冒泡）是在click处理程序中设置断点并检查堆栈跟踪直到那一点。

如果它运行两次，在第二次运行时你应该知道为什么它再次被解雇。

通过抛出一个异常，我猜你已经脱离了一些jQuery循环。

动态内容加载load（）激发两次

1 个答案: