Question

我正在开发一个jQuery插件。问题是当我将此插件分配给单个元素时工作正常。当我为2个不同的元素分配时，插件将无法按预期工作。

问题：

当我点击动态附加插件的列表时，我试图打印特定的元素id，但如果我点击其中任何一个，我会得到两个元素ID。

结果：

Object[input#a1]
Object[input#a2]

示例HTML：

<div><input type="text" id="a1" /></div> 
<div><input type="text" id="a2" /></div>

jQuery的：

$("#a1").xyz();     $("#a2").xyz();

<div>
    <input type="text" id="a1" />
    <div class=".xyz-list">some text</div> // dynamically created by plugin
</div>

<div>
    <input type="text" id="a2" />
    <div class=".xyz-list">some text</div> // dynamically created by plugin
</div>

示例代码：

(function($) {
    $.fn.xyz = function(opt) {
        var defaults = $.extend({
            select: 4,
            error: null
        }, opt);

        return this.each(function() {
            var ele = $(this);

                // APPEND LIST TO ELEMENT'S PARENT
                ele.parent().append('<div class="xyz-list">SOME TEXT</div>');

                // WHEN CLICK ON LIST
                $(".xyz-list").live('click', function() {
                    var current_list = $(this);
                    console.log(ele);
                    return false;
                });
        });   
    }
})(jQuery);

Answer 1

要解决此问题，请尝试使用class和data-id属性。

<div><input type="text" class="createNew" data-id="a1" /></div> 
<div><input type="text" class="createNew" data-id="a2" /></div>

Answer 2

那是因为你在循环中绑定处理程序，所以每个现有元素都附加了多个事件处理程序，你应该在.each()调用之后绑定处理程序。

return this.each(function() {
    var ele = $(this);
    // APPEND LIST TO ELEMENT'S PARENT
    ele.parent().append('<div class="xyz-list">SOME TEXT</div>');
}).parent().on('click', 'xyz-list', function() {
   // Do something:
}).end();

另一个选择是在生成元素时将处理程序直接附加到元素：

$("<div/>", {
   "class": "xyz-list",
    click: function() {
        var current_list = $(this);
        console.log(ele);
        return false;
    },
    text: 'SOME TEXT'
}).appendTo(ele.parent());

另请注意，不建议使用.live()方法，而应使用.on()方法。

自定义jQuery插件，可以处理多个元素

2 个答案: