如何为元素内部 JQuery 插件绑定事件？答案

【问题标题】：How to bind event for element inner JQuery plugin?如何为元素内部 JQuery 插件绑定事件？
【发布时间】：2014-11-18 14:38:32
【问题描述】：

这是一些 JQuery 插件的代码。

...    
return this.each(function(index, el) {
        var $this = $(this), data = $this.data('control');

        $(el).on('click',el, function(){
            alert('hello world!');
        }); 
    });
...

我是这样用的：

$('.mybutton').myPlugin();

单击功能通常适用于页面上具有 .mybutton 类的所有元素，但不适用于 ajax 加载的元素。伙计们，我如何在 JQ 插件中为动态创建的元素绑定点击功能？非常感谢！

【问题讨论】：

如果您进行原始方法调用会有所帮助： $('.mybutton').myPlugin();在每次 ajax 调用之后？
你试过$(document).on( 'click', el, function(){} );而不是$(el).on('click', el, function(){} );吗？在第一种情况下，您将绑定到元素本身，这些元素当时可能存在也可能不存在。在第二种情况下，您将绑定到肯定存在的文档。
$(document).on('click', el, function(){}); ← 此代码不起作用，因为 'el' 不是选择器，它的对象。 8-(
@jyrkim 这将为现有元素添加多个点击处理程序。
也许您可以将我的建议与此处的答案结合起来，以获取插件调用中使用的选择器，并将el 替换为选择器？ stackoverflow.com/questions/5477394/…

标签： jquery plugins bind live

【解决方案1】：

1) 如果您想为现有和新创建的元素使用通用事件处理程序，请使用event-delegation。处理程序绑定到始终存在的 DOM 中更高的元素，或绑定到文档。每次事件在 DOM 中冒泡并到达文档时，处理程序都会查看事件是否来自与给定选择器匹配的元素，然后才执行。

2) 您应该在您的插件外部单独设置处理程序。否则，每次调用插件时都会附加一个新的事件处理程序，然后单击即可获得多个事件。

// this handler executes whenever an element with class 'mybutton' is clicked
// and works for existing and newly added elements
$(document).on('click', '.mybutton', function (event) {
    console.log('A class "mybutton" was clicked');
    /* whatever to do on click here */
});

// your plugin code without the click-handler
$.fn.myPlugin = function() {
    return this.each(function(i, el) { /* whatever your plugin has to do */ });
};

3) 如果您现在使用您的插件，则将返回的对象存储在一个变量中。如果您以后需要它，您不必再次创建它，只需通过 var name 引用它即可。

var buttons = $('.mybutton').myPlugin();

4) 但请注意，此调用仅在运行时获取 DOM 中存在的按钮。如果您稍后在 DOM 中插入了一个新元素并希望将其添加到按钮集合中，您必须手动执行此操作。

// example for a new element on which you call your plugin
var newbutton = $('<button class="mybutton">Mynewbutton</button>').myPlugin();
$('body').append(newbutton); // insert the new element in the DOM
buttons.add(newbutton); // this adds the new element to the existing collection

如果您绝对想在插件内部附加点击处理程序，它必须如下所示：

$.fn.myPlugin = function() {
    return this.each(function(index, el) {
    var $this = $(this), data = $this.data('control');
    // attach a click handler to each element with class 'mybutton'
    if ($this.hasClass('mybutton')) $this.on('click', function(){
        alert('hello world!');
    });
    /* more code */
});

但请注意，现在您必须在每个新创建的按钮上调用您的插件。

【讨论】：

【解决方案2】：

根据我们的评论讨论，这应该可以解决问题。

绑定到文档
使用元素选择器绑定，而不是元素本身

一些代码：

$.fn.myPlugin = function () {
    $(document).on("click", this.selector, function (event) {
        event.preventDefault();
        alert("document(myButton) has been clicked");
    });
}
$(document).ready(function (event) {
    $(".myButton").myPlugin();
    $("#addMoreButtons").click(function (event) {
        event.preventDefault();
        $("<a/>").attr({
            "href": "javascript:void(0);",
            "class": "myButton"
        }).text("Button").appendTo("#buttons");
        $("#buttons").append("<br>");
    });
});

在这里工作小提琴：http://jsfiddle.net/p2bwryj1/

【讨论】：