Question

我遇到了防止可能产生不需要的结果的同一元素的重复点击的问题。我不能使用jquery的one（），因为这个事件附加到许多元素，包括被点击元素的子元素。

基本上我有一个div。用户可以单击div，它将发出一个AJAX请求来加载另一个div。用户可能会不小心再次单击div（正如我经常做的那样），这将导致两个AJAX请求并加载两个子div。如果已找到子项，则存在防止更多子项的逻辑，但在加载AJAX请求期间，可以再次请求它。不应该单击相同的元素两次并请求AJAX请求。但是，可能会同时点击多个元素。

每个子div也可以使用完全相同的（＆＃39; click＆＃39;）处理程序加载更多的子节点。我该怎么做才能防止重复点击发送多个AJAX请求而不使用jquery＆＃39; s？（

以下只是一个例子，但这是逻辑：

HTML

<div id = "parent" class = "button"> Click Me </div>

JQUERY

$('.button').on('click', function(){
  var data = getsomedata();
  $.post(url, data, function(data){
    $('.resultDiv').after(data);
  });
});

PHP

function someData ($db, $request){
  do some database request
  echo '<div class = "child button"> I am a child table that is also clickable </div>';
}

Answer 1

一种非常容易理解的方法是设置标志。

$('.button').on('click', function(){
   var hasBeenCliked = $(this).attr("has-been-clicked");
   if (hasBeenClicked === "yes") {
       return;
   }
   $(this).attr("has-been-clicked", "yes");

  var data = getsomedata();
  $.post(url, data, function(data){
    $('.resultDiv').after(data);
  });
});

Answer 2

one方法正是您所要求的。它将指定事件的处理程序绑定到一个元素，然后在完成后解除绑定。然而，与你上面的陈述相反，它只是从触发它的元素中解脱出来。使用处理程序的其他元素将继续按预期工作。

$('.button').one('click', function(){
    var data = getsomedata();
    $.post(url, data, function(data){
        $('.resultDiv').after(data);
    });
});

这基本上等同于以下内容：

function handler() {
    var data = getsomedata();
    $.post(url, data, function(data){
        $('.resultDiv').after(data);
    });

    $(this).off('click', '.button', handler);
});
$('.button').on('click', handler);

此方法仅适用于直接绑定的元素处理程序，而不是委托的处理程序。

Answer 3

您可以在触发后将元素添加到数组中，如果数组中包含的元素下次不会触发它。

var arr = new Array();
$(".button").on("click", function(){
    if($.inArray(this, arr) === -1){
        arr.push(this);
        console.log("N= " + $(this).text());
    }
    else
        console.log("Sorry!");
});

jsfiddle

防止共同事件发射两次

3 个答案: