javascript - jQuery 事件中的事件

Question

这可能是一个非常基本的问题，但我找不到答案。（我可能正在寻找错误的术语......）

例如，有时我觉得我需要在另一个事件中添加一个事件以共享变量。但是我已经意识到里面的事件可以被触发多次，这取决于父事件被触发的时间。

这是我正在谈论的一个基本示例：http: //jsfiddle.net/mRc9K/

$('.demo').click(function(){
    $('.hidden').show(function(){
        $('#link').click(function(){
            alert("Clicked"); //fired multiple times
            $(this).parent().hide(); 
        });
    });
});

如果您在“第一次点击”中多次单击，您将看到第二个事件是如何被多次触发的。

我不是在寻找那种行为。我知道我可以使用委托来避免它，.on()但是......没有其他方法可以避免内部事件被多次触发吗？

谢谢。

Answer 1

一个解决方案是使用 jQuery 的one()方法。

one()- 将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

在这种情况下，它将是：

$('#link').one('click', function(){
   alert("Clicked"); //fired multiple times
   $(this).parent().hide(); 
});

jsFiddle 示例在这里。

Answer 2

您还可以使用变量作为标志：Live DEMO

var clicked = false;
$('.demo').click(function(){
    clicked = true;
    $('.hidden').show(function(){
        $('#link').click(function(){
            if(clicked == true){
                alert("Clicked");
                $(this).parent().hide();
                clicked = false;
            }
        });
    });
});

Answer 3

只需使用.one()，每个元素只绑定一次事件：

$('.demo').click(function () {
    $('.hidden').show(function () {
        $('#link').one('click', function () {
            alert("Clicked");
            $(this).parent().hide();
        });
    });
});

演示和文档

Answer 4

您可以像所有其他人所说的那样触发一次，也可以每次都取消绑定点击事件（只是一种不同的方法）

$('.demo').click(function(){
    $('.hidden').show(function(){
        $('#link').click(function(){
            alert("Clicked");
            $(this).parent().hide();
            $('#link').unbind('click');
        });
    });
});

jsfiddle :)。