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

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/