jQuery live()函数的就地编辑问题.需要一个忍者

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"
    });  
 });   

如何让编辑在地方插件正常运行在我的div通过js创建?

任何帮助将不胜感激!!

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出现问题的原因是因为在第一次点击时它绑定了它，所以在第二次点击时它已经绑定并且可以工作。