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

如何让 edit-in-place 插件在我通过 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 问题的原因是，第一次单击时它绑定了它，所以第二次单击时它已经绑定并且可以工作。