自定义jQuery插件在多个元素上工作

-1

我正在开发一个jQuery插件。问题是，当我将这个插件分配给单个元素时，它可以正常工作。当我分配2个不同的元素，那么插件将无法按预期工作。自定义jQuery插件在多个元素上工作

问题：

当我点击动态通过插件追加列表中，我试图打印特定元素的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);

来源

2014-01-28 sravis

jquery版本用过吗？ –

@ArunPJohny jQuery版本1.8 – sravis

那是因为你要绑定的处理程序在一个循环中，所以每个现有元素将有超过一个的事件处理程序连接到它，你应该绑定.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()方法来代替。

来源

2014-01-28 06:31:48 undefined

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

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

来源

2014-01-28 06:25:17

自定义jQuery插件在多个元素上工作

回答

相关问题