仅当 jquery on() 函数尚不存在时，如何设置它？

Question

我正在通过 ajax 调用附加内容，其中我为单击事件添加了 jquery on() 函数。每次我更新内容时，也会再次设置事件，因此最后会执行多次。如何避免这种行为？

如何测试文档是否已经设置了点击事件？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="open-alert">Click</a>
<script>
    // first ajax load
    $(document).on('click', '.open-alert', function () {
        alert('hello world!');
    });

    // second ajax load
    $(document).on('click', '.open-alert', function () {
        alert('hello world!');
    });
</script>

我已经尝试了jQuery.isFunction()，但我不明白如何在这种情况下应用它。

Answer 1

使用

$(document).on('click', '#element_id', function() {
    //your code
});

每次点击时都会检查 DOM 是否匹配元素（通常用于使用 ajax 动态创建的元素）

但是使用

$('#element_id').on('click', function() {
    //your code
});

只会绑定到现有元素。

如果你使用第一个例子，你只需要调用一次，你甚至可以在你的 ajax 调用之前调用它，因为它会在每次点击时重新检查匹配的元素。

<script>
    $(document).on('click', '.open-alert', function () {
        alert('hello world!');
    });

    // first ajax load
    // second ajax load
    ...
</script>

Answer 2

如果您执行了多次，您可以取消绑定点击事件。

$(document).unbind('click').on("click", ".open-alert", function () {
  //do stuff here
 });

或者你也可以使用它

$(document).off("click", ".open-alert").on("click", ".open-alert", function () { 

  });

Answer 3

如果您无法将事件绑定到特定的 DOM 元素（例如，如果您使用 Turbolinks 可能会发生这种情况），您可以使用变量来检查您是否设置了事件。

本地范围

var clickIsSet = false;

// any ajax load
$(document).on('click', '.open-alert', function () {
    if ( clickIsSet ) {
        alert('hello world!');
        clickIsSet = true;
    }
});

全局范围

我不建议将clickIsSet 全局，但如果您要导入/导出模块，您可以这样做：

// main.js
window.clickIsSet = false;

// any-other-module.js
$(document).on('click', '.open-alert', function () {
    if ( window.clickIsSet ) {
        alert('hello world!');
        window.clickIsSet = true;
    }
});

Answer 4

jQuery 检查元素上是否存在事件：$._data( $(yourSelector)[0], 'events' )

这会返回所有元素事件，例如：click、blur、 专注,....

重要提示：$._data 工作时至少有一个事件绑定到元素。

现在：

1.在您的主脚本或第一个 ajax 脚本中绑定元素上的点击事件

<script>
   $(document).on('click', '.open-alert', function () {
      alert('hello world!');
   });
</script>

2. 在第二个 ajax 中：

var _data =  $._data( $('.open-alert')[0], 'events' );
if(typeof _data != "undefined"){
    var eventClick = $._data( $('.open-alert')[0], 'events' ).click
    var hasEventClick = eventClick != null && typeof eventClick != "undefined";
    if(!hasEventClick){
         $(document).on('click', '.open-alert', function () {
             alert('hello world!');
         });
    }
}

Answer 5

我对您的问题感到困惑，但据了解您的问题，我有三个建议：

1. 使用Id元素（如@Mokun write the answer）
2. 为调用功能使用通用函数，而不是通过点击事件使用。（确保函数不会通过调用覆盖您的内容）。
3. 在 jquery 中使用标志变量（或跟踪事件的全局变量）并识别特定执行的函数调用。