Question

首先，我完成了自己的家庭工作，我已经搜索了Google并使用了evt.stopPropagation();和unbind方法，但没有解决我的问题....

以下是我的案例：

想象一下，我有一个带有一些链接的左侧边栏，点击每个链接，中间的col将由ajax重新加载，代码如下：

<script>
$('.leftsidebar a').on('click', function(){
    var page = $(this).attr('class')
    $('#middleCol').load('loader.php?page='+ page);
});
</script>

所以每次点击左侧栏标签时，中间的col会加载一个标签class。php，就好了。

现在在我正在加载到中间列的页面中，在页面的末尾我有一些javascripts，例如，如果它在loader.php?page=test页面中test加载我有一些新的jQuery行，一个例子：

<script>
$('#blah').on('click', function(){
    $.ajax({
        type: 'POST',
        url: 'server.php',
        success: function(response){
            //blah  
        }   
    }); 
});
</script>

现在的问题是，当我第一次点击leftside bar一个标签加载测试页面时，它工作得很好，点击#blah只有1个请求会被发送到server.php ，但是当我从leftsidebar单击另一个a时，然后返回到test，现在如果我点击blah，ajax请求将被发送两次到server.php等等......如果我再试一次，请求将被发送3次！

我该如何防止这种行为？解决方案是什么？

我很感激帮助。

Answer 1

如果这个元素只有一个点击处理程序，你也可以这样做：

$('#blah').off('click').on('click', function(){...});

但更好的是不包括无用/冗余代码

Answer 2

一个相当简单的解决方案是将数据绑定到#blah以确定是否已绑定该click事件以防止它再次绑定。

$("#blah:not([data-bound])").on('click', function () {
    /* your code */
});
//not using .data to ensure attribute string set for selector use.
$("#blah").attr('data-bound', 'bound');

Answer 3

您应该将js文件与包含在网站标题中的视图分开：

<script src="yourPath/actions.js"></script>

这通常是正确的方法。

仅将文件包含在父.php文件中，并排除错误，例如您所拥有的错误。

您的loader.php不应包含任何Javascript代码。没有必要。

Answer 4

每次sidebar ajax触发时，会向页面添加一个脚本，将点击事件添加到#blah。因此，当点击#blah时，它会触发这些处理程序的每个。

您可以通过使用普通旧javascript document.getElementById('blah').onclick = yourClickFunction分配onclick处理程序来覆盖click事件，或者您可以先关闭click事件，然后使用jquery添加新事件

$('#blah').off('click').on('click', yourFunction);

另一个建议是为侧边栏链接使用事件委派，所以不要这样做： $('.leftsidebar a').on('click', function(){ 做这个： $('.leftsidebar').on('click', 'a', function(){

这为所有40个左右的链接创建了一个处理程序，效率更高一些。此外，以后添加的任何链接都会自动拥有点击处理程序，而无需您附加。

Answer 5

每次加载内页时，都会重新绑定blah点击事件。尝试将您的点击移动到您的外部脚本。

jQuery事件多次触发

5 个答案: