Question

我在我的页面上使用以下代码，我在ajax中加载。

$(document).ready(function() {
    $('#button_id').click(function() {
      //Do Something          
    });
});

现在当我点击按钮动作多次发生时。我知道它发生了，因为我多次加载ajax页面。

请帮我解决这个问题。

Answer 1

您可以使用.off()删除现有的侦听器：

$(function() {
    $('#button_id').off('click').click(function() {
      //Do Something          
    });
});

Answer 2

如果我对你的实施有误，我道歉。您的问题可能存在，因为绑定是在第一次页面加载时创建的，然后在随后的ajax加载中创建，并插入新脚本并创建重复绑定。你应该防止在ajax加载上生成任何绑定，以防止重复绑定，除非你善于清理。

如果你点击的按钮存在于ajax加载区域，那么你应该使用委托来确保点击处理程序仍然有效。

例如：

$( "body" ).on( "click", "#button_id", function() {
    //do something
});

这将添加一个绑定到body元素，但更具体地说是id #button_id。按钮上的单击事件将传播并冒泡到body元素（或您选择的任何父元素）。

这使得动态元素可以插入到DOM中，只需要一个事件处理程序来监听它。

不需要.on（）或.off（）调用单个ajax加载。这使您的绑定更加清晰。

当然，如果您的按钮不太可能一直存在于页面上，那么保留额外的绑定就不是一个好主意。只有在始终需要它们以防止优化问题时才创建这些类型的绑定。

Answer 3

更干净的解决方案是从加载了ajax的HTML中删除该代码，并在母版页中使用一个单独的事件处理程序

Answer 4

我猜你的问题是事件多次发生。

只尝试一次尝试：

$(document).ready(function() {
    $('#button_id').on("click",function(e) {
      e.preventDefault(); // This prevents the default non-js action (very used for anchors without links or hashes)
      e.stopPropagation(); // Prevent the bubling of the event and spread more times

      //Do Something          
    });
});

如果不能使用e.stopPropagation（）;尝试使用e.stopInmediatePropagation（）;

为我建议的最后一种方法添加文档。它可以解决你的问题。 http://api.jquery.com/event.stopimmediatepropagation/

如何避免多次加载jQuery函数？

4 个答案: