Question

这可能是一个简单的解决办法，但我在缠绕它的大脑时遇到了麻烦......

我正在为即将生成的某些div使用jQuery edit-in-place插件。它应该很简单：单击新创建的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

<强> Live Demo

只需更改按钮即可点击此按钮。

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

使用live（）函数进行jQuery编辑的问题..需要一个忍者

3 个答案: