Проблема с редактированием jQuery на месте с функцией live().. нужен ниндзя

Это, вероятно, легко исправить, но у меня проблемы с обдумыванием этого...

Я использую плагин jQuery для редактирования на месте для некоторых div, которые будут генерироваться на лету. Это должно быть просто: щелкните только что созданный div и получите возможность редактировать содержимое. У меня проблемы с live().

Без использования live() он, очевидно, отлично работает для статического div. Нажмите один раз, чтобы получить редактируемое содержимое.

Однако при использовании live() мне нужно дважды щелкнуть, чтобы отредактировать содержимое. Затем в любой последующий раз, когда он нажимается, это занимает только один раз. Это что-то вроде проблемы с фокусом. Возможно, модификация самого плагина поможет?

Вот именно о чем я говорю... http://jsfiddle.net/efflux/62CzU/

Это как-то связано с тем, как я вызываю функцию editinplace() в прямом эфире:

$('.editable').live('click',function() {
    //event.preventDefault();
    $('.editable').editInPlace({
        callback: function(unused, enteredText) { return enteredText; },
        bg_over: "#cff",
        field_type: "textarea",
        textarea_rows: "5",
        textarea_cols: "3",
        saving_image: "./images/ajax-loader.gif"
    });  
 });

Как заставить плагин редактирования на месте нормально работать с моими div, созданными с помощью js?

Любая помощь будет оценена!!


javascript jquery inline-editing inplace-editing
person Joseph Wer    schedule 09.08.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Быстрое и грязное исправление: http://jsfiddle.net/62CzU/5/

var $this = $(this),
      isInit = $this.data('edit-in-place');
if(!isInit){
    $('.editable').editInPlace({
        callback: function(unused, enteredText) { return enteredText; },
        bg_over: "#cff",
        field_type: "textarea",
        textarea_rows: "5",
        textarea_cols: "3",
        saving_image: "./images/ajax-loader.gif"
    });
    $this.click();
}
person Yury Tarabanko    schedule 09.08.2011
comment
Хорошо .. Я пытался смоделировать событие щелчка, но у меня был неправильный синтаксис. Спасибо! - person Joseph Wer; 09.08.2011

arrow_upward
2
arrow_downward

Он не работает, потому что он не настроен, пока вы не нажмете на него. Как только вы щелкнете по нему, вы настроите EditInPlace, для которого требуется собственный щелчок. Просто активируйте еще один клик после настройки: http://jsfiddle.net/62CzU/6/.

person kinakuta    schedule 09.08.2011
comment
Красиво, спасибо чувак! Все еще учусь, поэтому мой синтаксис нечеткий, но я пытался всеми способами имитировать щелчок. - person Joseph Wer; 09.08.2011

arrow_upward
1
arrow_downward

Живое демо

Просто измените кнопки, нажмите на это.

$("button.btn").click(function() {
    $(".mydiv").prepend('<div class="passage-marker"><div class="annotation editable">it take 2 clicks to edit me, unless I have already been edited</div></div>');

         $('.editable').editInPlace({
            callback: function(unused, enteredText) { return enteredText; },
            bg_over: "#cff",
            field_type: "textarea",
            textarea_rows: "5",
            textarea_cols: "3",
            saving_image: "./images/ajax-loader.gif"
        });  

    });
}

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

person Loktar    schedule 09.08.2011
comment
Это решение определенно кажется менее хакерским, чем запуск щелчка, но гарантированно ли существует div, когда привязан обработчик нажатия кнопки? - person kinakuta; 09.08.2011
comment
Спасибо, что объяснили мне live()... Я все еще новичок в этом. Ваше решение отлично работает, я ценю это! - person Joseph Wer; 09.08.2011
comment
Не обращайте внимания на мой комментарий - я пропустил, что вы добавляете div перед вызовом editInPlace. - person kinakuta; 09.08.2011