1

我使用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 以查看问题。

4

1 回答 1

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

我认为这样做有点糟糕，但它确实有效。住在这里的例子。

于 2012-08-16T14:08:14.087 回答