自定義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插件在多個元素上工作

回答

相關問題