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 () { ... });

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

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

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

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