1

这可能是一个简单的解决方案，但我无法将我的大脑包裹在它周围......

我正在为一些将动态生成的 div 使用 jQuery 就地编辑插件。应该很简单：点击新建的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 上正常运行？

任何帮助，将不胜感激！！

4

3 回答 3

2

快速而肮脏的修复：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();
}
于 2011-08-09T05:35:18.323 回答
2

它不起作用，因为在您单击它之前它没有设置。一旦你点击它，你就设置了需要它自己点击的 EditInPlace。设置后只需触发另一次点击：http: //jsfiddle.net/62CzU/6/

于 2011-08-09T05:35:39.220 回答
1

现场演示

只需将按钮更改为单击即可。

$("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是因为在第一次单击时它绑定了它，所以在第二次单击时它已经绑定并且可以工作。

于 2011-08-09T05:40:16.783 回答