jquery - 如何防止多次附加事件处理程序？

Question

我有一个函数，它将把 click 事件处理程序附加到我的元素:

function attachClickToElem() {
    $('.elem').on('click', function () {
        alert('Hello World');
    });
}

问题是每当我调用这个函数时，n click 处理程序附加到我的元素，所以当我调用它两次，当我单击我的元素时，我收到两个警报:

$(function () {
    attachClickToElem();
    attachClickToElem();
});

我该如何预防呢？并检查我的元素是否已经有了点击处理程序？

<强> Here is fiddle

Answer 1

尝试

function attachClickToElem() {
    $('.elem').off('click.mytest').on('click.mytest', function () {
        alert('Hello World');
    });
}

$(function () {
    attachClickToElem();
    attachClickToElem();
});

演示:Fiddle

另一种方式

function attachClickToElem() {
    $('.elem').filter(function(){
        return !$(this).data('myclick-handler');
    }).on('click.mytest', function () {
        alert('Hello World');
    }).data('myclick-handler', true);
}

$(function () {
    attachClickToElem();
    attachClickToElem();
});

演示:Fiddle