使用live（）函數進行jQuery編輯的問題..需要忍者

Question

這可能是一個簡單的解決方法，但是我很難纏住它。

我正在使用jQuery即時編輯插件來處理將在運行中生成的一些div。 它應該很簡單：單擊新創建的div，然后可以編輯其內容。 我遇到了live（）的問題。

如果不使用live（），顯然對於靜態div來說可以正常工作。 單擊一次，獲取可編輯的內容。

但是，在使用live（）時，我需要雙擊才能編輯內容。 然后，在隨后的任何時間單擊它，只需一次。 這有點像焦點問題。 也許修改插件本身會有所幫助？

這正是我在說的... http://jsfiddle.net/efflux/62CzU/

它與我用live調用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"
    });  
 });   

如何使就地編輯插件在通過js創建的div上正常運行？

任何幫助，將不勝感激！！

Answer 1

快速而骯臟的修復程序： 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();
}

Answer 2

它無法工作，因為只有在單擊它之前，它才被設置。 一旦單擊它，就可以設置EditInPlace，這需要它自己單擊。 設置后只需觸發另一次點擊即可： http : //jsfiddle.net/62CzU/6/

Answer 3

現場演示

只需將按鈕更改為此即可。

$("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產生問題的原因是，第一次單擊將其綁定，因此第二次單擊已被綁定並且可以使用。