Question

这是一些JQuery插件的代码。

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

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

我这样使用它：

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

单击函数normaly适用于页面上具有.mybutton类的所有元素，但不处理加载了ajax的元素。伙计们，我如何在JQ插件中绑定click功能来创建dinamic元素？非常感谢！

Answer 1

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

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

一些代码：

$.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/

Answer 2

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 */
});

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

如何绑定元素内部JQuery插件的事件？

2 个答案: