jQuery和防止函数执行两次超链接双击

我有一个简单的超链接HTML页面。该链接完美工作并执行jQuery函数。我会警告说“现在”。jQuery和防止函数执行两次超链接双击

问题是，当用户双击链接时，它将执行两次jQuery代码，并将“现在”警报两次。当我下次单击链接一次时，它会执行jQuery代码两次甚至更多次，我会得到几个“Now”警报。

我应该如何修改我的代码以防止多次执行jQuery代码？

下面是HTML代码：

<a href="#" class="editing" data-match="1" data-place="1" data-selected="20" data-checking="area">Use</a>

这里是我的jQuery代码：

jQuery(document).on('click', '.editing', function(e) { 
    e.preventDefault(); 

    var $this = $(this), 
     match = $this.data('match'), 
     place = $this.data('place'), 
     selected = $this.data('selected'), 
     checking = $this.data('checking'); 

    jQuery.post("myownpage.php", { 
    match: match, 
    place: place, 
    selected: selected, 
    checking: checking 
    }).done(function(data) { 
    alert('Now'); 
    $('html').css({ 'overflow': 'auto', 'height': 'auto' }); 
    $this.parent().parent().parent().parent().parent().parent().css('display', 'none'); 
    }); 
});

来源

2017-05-04 xms

你可以使用'.one'，然后重新绑定您的点击后完成 – Pete

后，你希望链接可以点击每个每个页面加载只有一次？ –

@AlaaMh是的，我想是的。 – xms

您可以使用一个外部范围的变量（这里eventComplete）了解事件是否是完整的还是不

var eventComplete = true; 
jQuery(document).on('click', '.editing', function(e) { 
    e.preventDefault(); 
    if(eventComplete) { 
     eventComplete = false; 
     var $this = $(this), 
     match = $this.data('match'), 
     place = $this.data('place'), 
     selected = $this.data('selected'), 
     checking = $this.data('checking'); 

     jQuery.post("myownpage.php", { 
     match: match, 
     place: place, 
     selected: selected, 
     checking: checking 
     }).done(function(data) { 
     alert('Now'); 
     $('html').css({ 'overflow': 'auto', 'height': 'auto' }); 
    $this.parent().parent().parent().parent().parent().parent().css('display', 'none'); 
     eventComplete = true; 
    }); 
    } 
});

来源

2017-05-04 11:37:50

检查一些increment。如果你点击c=1下一次c=2一个时间，如果条件不allowe以上1

var c=0; 
jQuery(document).on('click', '.editing', function(e) { 
    e.preventDefault(); 
    C++; 
if(c > 1) 
{ 
    var $this = $(this), 
     match = $this.data('match'), 
     place = $this.data('place'), 
     selected = $this.data('selected'), 
     checking = $this.data('checking'); 

    jQuery.post("myownpage.php", { 
    match: match, 
    place: place, 
    selected: selected, 
    checking: checking 
    }).done(function(data) { 
    alert('Now'); 
    $('html').css({ 'overflow': 'auto', 'height': 'auto' }); 
    $this.parent().parent().parent().parent().parent().parent().css('display', 'none'); 
    }); 
    } 
});

来源

2017-05-04 11:30:03 prasanth

可以使用相同的功能绑定多个event。您可以设置相同的功能dblclick所以它会运行一次..

jQuery(document).on('click dblclick', '.editing', function(e) { 
    e.preventDefault(); 

    var $this = $(this), 
     match = $this.data('match'), 
     place = $this.data('place'), 
     selected = $this.data('selected'), 
     checking = $this.data('checking'); 

    jQuery.post("myownpage.php", { 
    match: match, 
    place: place, 
    selected: selected, 
    checking: checking 
    }).done(function(data) { 
    alert('Now'); 
    $('html').css({ 'overflow': 'auto', 'height': 'auto' }); 
    $this.parent().parent().parent().parent().parent().parent().css('display', 'none'); 
    }); 
});

来源

2017-05-04 11:33:36

使用jQuery.one，它执行的事件处理程序只有一次。像这样 -

$(document).one('click', eventHandler)

倒过来做工作后重写处理程序参照空处理，像这样 -

var eventHandler = function(e) { 

// point eventHandler to a do nothing function 
eventHandler = function(){ return false;}; 

e.preventDefault(); 

var $this = $(this), 
    match = $this.data('match'), 
    place = $this.data('place'), 
    selected = $this.data('selected'), 
    checking = $this.data('checking'); 

jQuery.post("myownpage.php", { 
    match: match, 
    place: place, 
    selected: selected, 
    checking: checking 
}).done(function(data) { 
    alert('Now'); 
    $('html').css({ 'overflow': 'auto', 'height': 'auto' }); 
    $this.parent().parent().parent().parent().parent().parent().css('display', 'none'); 
}); 
}; 

jQuery(document).on('click', '.editing', eventHandler);

或者你可以使用off方法来删除而不是将引用重新分配给无所事事功能。

来源

2017-05-04 11:34:07 hazardous

在我看来'e.preventDefault（）;'不再工作。 – xms

用替代方法更新。 – hazardous

检查这个例子。它分别输出单击和双击。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<title>Title of the document</title> 
</head> 

<body> 
<div class="div">My Div</div> 
<script type="text/javascript"> 
var flag = false; 
var time; 

$(document).on("dblclick", ".div", function(e) { 
    flag = true; 
    alert("Double Clicked"); 
}); 

$(".div").on("click",function(e) { 

    time = setTimeout(function(){ 
     var x =checkSingleClick(); 
     console.log(x); 
     if(x){ 
      alert("Single Clicked"); 
     }else{ 
      flag = false; 
     } 
    clearTimeout(time);   
    },350); 

}); 

function checkSingleClick(){ 
     if(flag == false){ 
      return true; 
     }else{ 
      return false; 
     } 
} 

</script> 
</body> 

</html>

来源

2017-05-04 12:07:45

jQuery和防止函数执行两次超链接双击

回答

相关问题