Php jQuery事件激发多次

我对jQuery事件有问题

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

main-page.php由以下部分组成：

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

b） 导航栏（其中包含各种选择）

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

d） 页脚

让我们假设导航栏由|主页|消息|关于我们|组成

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

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

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

**我对带有radio元素类的元素使用

on（）

事件的原因是因为它是未来的DOM元素。最初，此元素不在页面上

JS代码示例：

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

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

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

我要做的是，只要我单击一个元素，它的类是radio元素，我就进入服务器，获取

ajaxcall.php

script的输出

观察INSPECT元素中的NETWORK选项卡，我看到click事件多次执行AJAX调用。有时2个，其他3个，甚至5个

我为解决问题所做的（他们中没有一个人100%工作）：

A） 使用“关闭”绑定事件之前先解除绑定

B） 使用事件。stopImmediatePropagation（）

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

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

而且，这种行为（多事件触发）是我无法预测的。有时它可以正常工作，有些则可以连续触发事件5次

我已经在网上搜索了一个星期了，但是我所做的一切都没有解决这个问题。任何解决方案都将不胜感激：）

---

谢谢

根据我在这里读到的内容，我猜您不止一次使用click bind事件打开js文件。如果您正在使用自定义路由或单页应用程序，但没有刷新页面，则很可能是基于您所说的内容

---

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

根据您的描述，我猜测您没有删除事件侦听器。因此，每次切换选项卡/页面时，都会反复添加相同的事件。即使你已经试着去做了，但有些事情还是不对劲。我怀疑这和Ajax有什么关系。

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

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

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

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

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

---

你试过

.one（'click'）

而不是

。on（'click'）

？这是水疗吗？听起来你可能有一些缓存的javascript。尝试刷新页面，然后单击并查看该项被调用的次数。基本上，我想知道绑定此单击函数的文件是否多次出现在页面上。不，我没有尝试过一个（），因为我希望能够再次选择它并执行相同的操作。例如，如果此事件绑定在单选按钮选择上..请使用一个（）。。。在函数结束时，使用one（）再次绑定它，您可以一次加载所有的js和CSS，而不是按“视图”加载吗？仅仅因为您使用AJAX来切换内容，并不意味着您需要发送不同功能和样式的http请求。一旦我在导航栏上按下一个选项，我将删除所有JS文件，并仅链接单击的选项的JS文件。我对CSS也这么做。但我会在一段时间内对此进行测试。@Christossang我遇到了这个问题，我猜你不止一次加载js文件。例如，如果您使用php交换页面，并且在该php页面中有js文件，如果您转到另一个页面并返回-您将在浏览器中加载该js文件两次（假设您没有刷新页面或没有使用类似requirejs的东西），因此，事件会多次触发。目前我不在家测试它，只是想告诉您如何删除js文件：。我也用同样的方法添加我想要的js文件。在HTML中的任何时候，我都只能看到HomeJS文件的一个实例。这准确吗？或者它多次加载同一个文件，而我就是看不见它？@Christossang只要在可以的时候测试一下：）。如果你有多个副本，这将是最快和最确定的方法。请记住，当您在浏览器中引入js文件时，它会保持在自身内部，因此，同样，如果您不刷新页面，并引入两次拉取js文件的页面，那么浏览器现在将保留两个副本，并将事件绑定两次

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

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

 });

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

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