使用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产生问题的原因是，第一次单击将其绑定，因此第二次单击已被绑定并且可以使用。