пользовательский плагин jQuery для работы с несколькими элементами

Question

Я разрабатываю плагин jQuery. Проблема в том, что, когда я назначаю этот плагин одному элементу, он работает правильно. Когда я назначаю для двух разных элементов, плагин не будет работать так, как ожидалось.

Издание:

Когда я нажимаю на список, который динамически добавленный плагин, я пытался напечатать конкретный идентификатор элемента, но я получаю как идентификатор элемента, если я нажимаю на любых из них.

Результат:

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

Это потому, что являются обязательными для обработчиков в цикле, поэтому каждый существующий элемент будет иметь более чем один обработчик событий прилагается к нему, вы должны связать обработчик после .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() метод.

Answer 2

, чтобы решить эту проблему попробуйте с class и data-id атрибутов.

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