使用jQuery只添加一次OnClick处理程序-即使再次调用也是如此
使用jQuery只添加一次OnClick处理程序-即使再次调用也是如此
提问于 2012-04-02 10:50:28
如果我将一个处理程序分配给一个元素的OnClick事件两次，则该处理程序将执行两次。但是我想改变这一点，即使我给它赋值两次，处理程序也只执行一次。
演示问题的无意义示例：
$('.button').click(
function(){
alert('here');
});
$('.button').click(
function(){
alert('here');
});所以我添加了两次处理程序。现在，当我单击那个类的元素时，我会得到两个警告框。
问题是，我如何限制它，使我只能得到一个警告框？
回答 8
Stack Overflow用户
回答已采纳
发布于 2012-04-02 11:04:06
如果.one()确实是您想要的(在它被触发一次之后删除事件处理程序)，那么我相信这就是正确的答案。如果没有，可以先解绑事件，然后再绑定：
var myEventHandler = function () {alert('hello')};
$('a').unbind('click', myEventHandler);
$('a').bind('click', myEventHandler);应该行得通。
编辑:由于此回复不断获得选票，我将添加另一个(在大多数情况下更好)解决方案，该解决方案至少在OP的情况下有效。在处理动态添加的内容时，只需在父元素上使用jQuery的on()，而不是直接在元素上应用事件处理程序。
Stack Overflow用户
发布于 2012-04-02 11:04:16
要使事件仅触发一次，请仅绑定它们一次。动态添加元素时，使用on()将事件处理程序绑定到父元素
查看此jsfiddle
<div id="container">
<p>Paragraph #1</p>
</div>
<div>
<button id="add">Add Elements</button>
</div>
<script type="text/javascript">
var n = 1;
$('#add').click(function() {
$('#container').append('<p>Paragraph #' + ++n + '</p>');
});
$('#container').on('click', 'P', function() {
alert($(this).text());
});
</script>请注意事件处理程序是如何只向on()注册一次的。动态添加元素的代码不注册事件处理程序。
Stack Overflow用户
发布于 2013-11-29 17:55:30
一个小窍门可以帮助你：
jQuery(".button:not(.clickadded)").click(function(){
alert('here');
).addClass("clickadded");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9970358
复制相关文章
相似问题