jQuery事件多次触发

我遇到了jQuery事件的问题。jQuery事件多次触发

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

主要-page.php文件中包括了：

一）头（其中标志是）

B）一个导航栏（其中，各种选择是）

c）一种动态内容区域（当点击的元素对导航栏的内容将被加载）

d）页脚

可以说，导航条由|首页|信息|关于我们| ...

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

只要我选择HOME（例如），我从动态内容区域删除任何内容，并使用AJAX放置HOME的内容。与此同时，我删除了与之前内容相关的任何CSS/JS文件，并且我链接了与加载的CSS/JS文件相关联的文件。这部分工作完美。

现在，如果我从一个选择切换到其他选择（可以说，从首页 - >消息 - >关于我们，然后回到主页），如果我点击一个按钮在家里，它会触发多个事件倍。如果该事件导致对服务器的AJAX调用，则情况会更糟糕（想象一下调用服务器5次而不是1次）。

**我在无线电元素类的元素上使用on（）事件的原因是因为是未来的DOM元素。最初这个元素不在页面上。

的JS代码示例：

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

    $.ajax({ 

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

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

      }    
    }); 

});

我做什么，我只要一点击一个元素与类无线电元件的，我走在服务器和我取AjaxCall的输出。 PHP脚本。

看到INSPECT ELEMENT中的NETWORK标签，我发现click事件多次执行AJAX调用。有些时候2，其他3个甚至5

我做了什么来解决这个问题（其中非正常工作100％）：

A），使用“关”

结合之前解除绑定事件

$(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调用（如发送电子邮件至客户端）。

此外，这种行为（多个事件触发）不是我可以预测的。有时它可以正常工作，有些则连续五次触发事件。

我一直在网上搜索了一个星期，但我试过的一切都没有解决问题。任何解决方案将不胜感激:)

谢谢！

来源

2015-04-22 christostsang

你尝试过'。一（ '点击'）'，而不是'。对（ '点击'）' ？ –

这是SPA吗？听起来像你可能有一些缓存的JavaScript。尝试硬刷新页面并单击并查看该项目被调用的次数。基本上我想知道是否绑定这个点击函数的文件多次被带到页面上。 – ajmajmajma

不，我没有尝试过一个（），因为我想能够再次选择它并执行相同的操作。例如，如果这个事件绑定在一个单选按钮上.. – christostsang

根据我在这里阅读的内容 - 我想你会带来不止一次点击绑定事件的js文件。如果您使用自定义路由或单页面应用程序而不刷新页面，则很可能基于您所说的内容。

你可以通过在click事件中添加一个console.log（在ajax上面）来测试这个理论，并且用它来检查日志。如果你点击它并记录不止一次登录的内容，那么你就知道这是问题所在。我不认为这是阿贾克斯。

来源

2015-04-22 13:56:16 ajmajmajma

一旦我按下导航栏上的选择，我删除所有的JS文件，我只链接选定的JS文件点击。我对CSS也做了同样的事情。但我会在一段时间内测试一下。 – christostsang

@christostsang我遇到了这个问题，我的猜测是你不止一次加载了js文件。例如，如果您使用php来交换页面，并且您在该php页面中有js文件，那么如果您转到其他页面并返回 - 您将在浏览器中加载该js文件两次（假设您没有刷新页面或不使用requirejs之类的东西），因此事件不止一次触发。 – ajmajmajma

目前我不在家测试它，但只是给你一个想法这是如何删除js文件：http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml。我也使用相同的方式添加我想要的js文件。在任何时候，在我的HTML中，我只能看到主js文件的一个实例。这是否准确？还是它加载多次相同的文件，我只是不能看到它？ – christostsang

根据您的描述，我的猜测是您并未移除事件侦听器。所以每次切换标签/页面时，都会一遍又一遍地添加同一个事件。即使你试图做到这一点，但某些事情并不正确。我怀疑它与Ajax有什么关系。

来源

2015-04-22 14:16:11 user3492940

您是否意味着在导航栏选择时删除所有事件侦听器？ – christostsang

@christostsang这正是上面在ajmajmajma的回答中提出的建议 –

我在一段时间里也遇到过同样的问题。我通过在执行新的事件处理程序之前解除与元素相关联的所有事件来解决此问题。使用这样的：

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

这将创建一个新的人之前解除绑定以前的事件处理程序。我认为这对你会有好处。

如果您正在使用jQuery版本1.7+ 你可以使用关闭（）这样的

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

来源

2017-08-03 12:24:10

jQuery事件多次触发

回答

相关问题