Как прикрепить функцию плагина к динамически создаваемым элементам в JQuery?

Question

Я прикрепил JQuery UI Selectable к UL element. Но li item, которые были динамически созданы . И, конечно, я не мог сделать их выбор. прикрепить plugin's function to dynamic created elements in JQuery!?

например:

<ul id="selectable">
    <li class="dataItem">item dynamic created here but you can't select me</li>

</ul>

[обновление]

JQuery код:

$( "#selectable" ).selectable();

и где я использую delegate или live!?

способ использования delegate и live для привязки событий следующим образом:

$('#selectable').delegate('li','click',function(){
  // do something here
});

но selectable plugin's events:

Supply a callback function to handle the selected event as an init option.

$( ".selectable" ).selectable({
   selected: function(event, ui) { ... }
});

и новый элемент не получил состояние selectable plugin's, например:

ui-selectee

So,should I re-attach the plugin at every time when a new item added!?

Большое спасибо !!

Answer 1

jQuery предлагает .live , который будет делать именно то, что вы хотите.

«Присоединить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем».

Answer 2

используйте .live() или .delegate()

---

для вашего обновления , звоните $( "#selectable" ).selectable(); сразувремя, в которое вы прикрепляете элемент #selectable в DOM.

, например,

$('#selectable').click(function(){
    alert('I will not fire');
});

$('body').append('<ul id="selectable"><li class="dataItem">item</li></ul>');

$('#selectable').click(function(){
    alert('I will fire');
});

alert('I will fire'); будет единственным вызванным предупреждением.