Добавьте Jeditable поля к делегату в jQuery

Question

Как я могу объединить следующее с делегатом в jQuery?

У меня есть #commentContainer, окружающий все редактируемые элементы, и я динамически добавляю редактируемые поля (Jeditable).возможность редактирования не работает для динамически загружаемых элементов.

     /* Bind Jeditable instances to "edit" event. */
    $(".edit").editable('/Comment/PostComment/', {
        type: 'textarea',
        cancel: 'Cancel',
        submit: 'OK',
        indicator: '<img src="img/indicator.gif">',
        tooltip: 'Click to edit...',
        event: "edit"
    });
    /* Find and trigger "edit" event on correct Jeditable instance. */
    $(".edit_trigger").bind("click", function () {
        $(this).prev().trigger("edit");
    });

Answer 1

Существует решение для добавления jQuery.editable для динамически добавляемых полей.

$("body").on("click",".editable",function(e){

  // Add editable plugin
  // but! for `focus` instead common `clik` event

  $(this).editable('go.to',
    {
      event : 'focus.editable',
      ..
      ..

     // Then trigger focus event

   }).trigger("focus");
 })

Answer 2

Делегирование событий не работает для запуска кода при добавлении элемента в DOM. Некоторое событие браузера должно сначала произойти, как щелчок.

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

$('<textarea>').editable( /* settings */ )
               .appendTo( '#commentContainer' );