jQuery编辑就地奇怪的行为

Question

我使用http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html edit-inplace插件。

对于单个可编辑元素，它工作正常，但我的项目中有很多。当我点击一个元素时，会发生以下情况：

实际文本消失。而是出现<input>元素。我所做的一切都是

$('th,td').editable();

但是表被动态加载到DOM中：

$('#id').load('template.html', function() {
    $('th,td').editable();
});

知道这里有什么问题吗？你知道如何解决这个问题吗？

http://jsfiddle.net/2gYw2/6/（不工作） - 添加元素并单击进行编辑，然后单击td或th以查看问题。

Answer 1

实际上你应该一次调用该方法可编辑，不再需要。 我找到了解决这个问题的两种可能性（也许有更多解决方案）。

1. 您创建一个数组并存储使用editable（）调用的对象。
2. 添加一个变量来标记jQuery对象中可编辑的调用

我更喜欢第二种解决方案，因为我发现它更容易使用。我只是向jquery添加一个新函数来执行此操作。

编辑：

我将类替换为HTMLElement。

(function($){
    $.fn.refreshEditable = function(){
        $(this).each(function(){
            if(!$(this).hasClass("not-editable")){
              $(this).addClass("not-editable");
              $(this).editable();
            }
        });
    }        
})( jQuery );


$('th,td,h2').refreshEditable();

$('#addTable').click(function(){
    $('body').append("<div><h2>Add element</h2></div>");
    $('th,td,h2').refreshEditable();
});

我认为这样做有点不好但是有效。实时here中的示例。