php - jQuery 事件多次触发

Question

我在 jQuery 事件方面遇到问题。

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

main-page.php 的组成为:

a) 标题( Logo 所在的位置)

b) 导航栏(其中有各种选择)

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

d) 页脚

假设导航栏由 | 组成首页 |留言 |关于我们 | ...

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

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

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

**我在具有 radio-element 类的元素上使用 on() 事件的原因是因为它是 future 的 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 选项卡，我发现单击事件正在多次执行 AJAX 调用。有时是 2 个，有时是 3 个，甚至 5 个。

我做了什么来解决这个问题(没有一个能 100% 工作):

A) 在绑定(bind)事件之前使用“off”取消绑定(bind)事件

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

B) 使用事件。stopImmediatePropagation()

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

     event.stopImmediatePropagation();

     //rest of code

 });

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

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

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

 });

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

此外，这种行为(多个事件触发)不是我可以预测的。有时它工作得很好，有些时候它会连续触发事件 5 次。

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

谢谢!

Answer 1

根据我在这里阅读的内容 - 我猜您多次通过单击绑定(bind)事件引入 js 文件。如果您使用自定义路由或单页应用程序并且不刷新页面，则很可能是基于您所说的。

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