Question

我遇到了jQuery事件的问题。

首先让我解释一下页面的设置：

main-page.php包含：

a）标题（徽标所在的位置）

b）导航栏（各种选择的位置）

c）动态内容区域（将加载导航栏上单击元素的内容）

d）页脚

让我们说导航栏由|组成HOME |消息|关于我们| ...

HOME的内容是一个单独的PHP文件，带有单独的CSS和JS文件。所有选择都是如此。

一旦我选择HOME（例如），我就从动态内容区域删除任何内容，然后使用AJAX放置HOME的内容。同时我删除任何与先前内容相关联的CSS / JS文件，并链接与加载的CSS / JS文件相关联的CSS / JS文件。这部分工作得很好。

现在，如果我从一个选项切换到其他选择（让我们说从HOME - ＆gt; MESSAGES - ＆gt;关于我们然后再回到HOME），如果我点击HOME内的一个按钮，它将触发事件多次。如果该事件导致对服务器的AJAX调用（想象一下调用服务器5次而不是1次），情况会更糟。

**我在带有radio-element类的元素上使用on（）事件的原因是因为是未来的DOM元素。最初这个元素不在页面上。

JS代码示例：

$(document).on('click', '.radio-element', function(){

    $.ajax({

            url: "js/ajax/ajaxcall.php",
            success: function(output){

                $('#ajaxcall-container').html(output);

            }               
    });

});

我所做的是，只要点击带有radio-element类的元素，我就进入服务器并获取ajaxcall.php脚本的输出。

在INSPECT ELEMENT中查看NETWORK选项卡，我看到click事件多次执行AJAX调用。有时2，其他3甚至5。

我做了什么来解决问题（不是他们100％工作）：

A）在使用＆＃34; 关闭＆＃34;

绑定之前取消绑定事件

$(document).off('click','.radio-element').on('click', '.radio-element', function(){ .... });

B）使用事件。 stopImmediatePropagation（）

$(document).on('click', '.radio-element', function(event){ 

     event.stopImmediatePropagation();

     //rest of code

 });

以下是我尚未尝试的解决方案，因为我在一篇文章中读到它不会停止事件绑定过程，它只会阻止多个事件执行（不知道这是否会导致其他事件）问题）。

$(document).on('click', '.radio-element', function(event){ 

     if(event.handled !== true) 
    {
        //Code goes here
        event.handled = true;
    }

 });

多事件触发的问题是有AJAX调用执行不应该多次执行的操作（例如，向客户端发送电子邮件）。

此外，这种行为（多事件触发）不是我能预测的。有时它工作正常，其他一些它连续5次发射事件。

我一直在网上搜索一周，但我尝试的一切都没有解决问题。任何解决方案将不胜感激：）

谢谢！

Answer 1

基于我在这里阅读的内容 - 我猜你会多次使用click bind事件来引入js文件。如果您使用自定义路由或单页应用程序而不刷新页面，则很可能基于您所说的内容。

您可以通过在click事件（在ajax上方）中添加console.log来测试此理论，然后使用它并查看日志。如果您点击它并且它记录了您多次记录的内容，那么您就知道这就是问题所在。我不认为这是ajax。

Answer 2

我也遇到了同样的问题。我通过在执行新的事件处理程序之前解除与元素关联的所有事件来解决这个问题。使用方式如下：

[^0-9\p{L}()-]

这将在创建新事件处理程序之前取消绑定。我认为这对你有用。

如果您使用的是jquery版本1.7+ 你可以像这样使用off（）

$('#element').unbind().click()
  {
    //write something here
  }

Answer 3

根据您的描述，我的猜测是您没有删除事件侦听器。因此，每次切换标签/页面时，都会反复添加相同的事件。尽管你已经尝试过，但有些事情是不对的。我怀疑它与Ajax有什么关系。

jQuery事件多次触发

3 个答案: