1

http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.htmledit-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 回だけ呼び出す必要があります。これを解決する2つの可能性を見つけました（おそらくもっと解決策があります）。

  1. 配列を作成し、editable() で呼び出されたオブジェクトを格納します。
  2. jQuery オブジェクトで editable の呼び出しにフラグを立てる変数を追加します

2 番目のソリューションの方が使いやすいので、私は 2 番目のソリューションを好みます。これを行うには、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();
});

これを行うのは少し悪いと思いますが、うまくいきます。live hereの例。

于 2012-08-16T14:08:14.087 に答える