javascript - Jquery 小部件 - 事件

Question

我正在构建一个简单的 JQuery 小部件。我的小部件构建附加了一些项目。我想知道如何从小部件中正确地将事件函数添加到这些新添加的项目中。

例如:

(function ($) {
    $.widget('be.tagEditor', {
        options: {
        },
        _init: function () {
            var me = this;
            createObj();
        },
        createObj: function() {
            var me =this,
                obj = me.element;
            obj.append('<div class="example">');
        }
    });
})(jQuery);

如果我有类似上面的内容，向 div 添加事件的正确方法是什么？

Answer 1

最有效的方法是使用 jQuery 的 .on()事件绑定(bind)。例如:

$(document).on('click', '.example', function () { ... });

您可以在代码中的任何位置定义它，当具有该类的元素(此处为示例)具有适当的触发器(此处为点击)时，它将触发。

这比在创建每个项目时向其添加事件处理程序更有效，尤其是当元素数量可能很大时。

注意: 早期版本的 jQuery 有 .live()方法来实现这一点，得到 removed in version 1.9 。这些版本中与上述代码等效的代码如下所示:

$('.example').live('click', function () { ... });