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

Question

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

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

问题是每当我调用这个函数时，nclick处理程序都会附加到我的元素，所以当我调用它两次时，alert当我点击我的元素时会得到两个：

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

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

这是小提琴

Answer 1

尝试

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

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

演示：小提琴

其他方式

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

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

演示：小提琴

Answer 2

工作 jsFiddle 演示

使用.each()方法循环遍历您的元素，并使用方法检查已经事件处理程序 的标志.data()，如果标志是true，则跳过当前循环。否则，将事件处理程序附加到元素并将标志设置为true.

function attachClickToElem() {
    $('.elem').each(function () {
        var $elem = $(this);

        // check if event handler already exists
        // if exists, skip this item and go to next item
        if ($elem.data('click-init')) {
            return true;
        }

        // flag item to prevent attaching handler again
        $elem.data('click-init', true);

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

---

参考：

• .each()- jQuery API 文档
• .data()- jQuery API 文档

Answer 3

我相信接近这一点的东西：

function attachClickToElem() {
    $('.elem:not(.has-click-handler)')
        .addClass('has-click-handler')
        .on('click', function () {
          alert('Hello World');
    });
}