1

いくつかのコンポーネントが表示されたターゲットdivを持っています。これらのコンポーネントには、いくつかのイベントが添付されています（マウスオーバー、クリック）。私はこのコードもそれらのイベントも制御していません。彼らはただそこにいます。このdiv内にウィジェットをレンダリングしたいと思います。そうするために、私は次のようなことをしています：

var save = el.innerHTML; 
el.innerHTML = "my widget code";

ウィジェットがプロセスを終了したら、元のコンテンツに戻したいので、次のようにします。

el.innerHTML = save;

以前に保存されたコンポーネントは正しく置き換えられますが、それらにアタッチされたイベントは機能しなくなります。

隠すことはできません、divを表示します。正確なスタイルと位置を設定するには、innerHTMLを置き換える必要があります。

私の場合はどうしますか？役立つ場合はjQueryを使用しています。

ありがとう。

4

3 に答える 3

5

DOM要素をシリアル化してHTMLに戻すと、すべてのイベントハンドラーとバインドされたデータが失われます。

DOMを使用している場合は、HTMLではなくDOMを使用してください。

var save = $(el).children().detach();
$(el).html(widgetHTML);

// later
$(el).empty().append(save);
于 2012-10-03T16:51:19.407 に答える
3

.detach役に立つかもしれません-http://api.jquery.com/detach/

.removeこれは、関連するすべてのjquery要素データと同じように機能します。これにはjqueryで追加されたイベントリスナーが含まれますが、添付されている「通常のDOMイベント」は失われます。

jQueryを使用して要素を再アタッチする必要もあります。

var stored = $(el).detach();

//… wait for something to finish, then reattach

stored.appendTo('#outer');
于 2012-10-03T17:01:02.010 に答える
1

elイベントは変更されていないように見えるため、要素にイベントを委任できます-これらの新しく追加された要素は、バインド時に存在しませんでした

$(el).on('click','yourelementtoattachevent',function(){
       // replace click with your event/events
       // your code goes here
});

これは、jQuery 1.7以降を使用していることを前提としています。他の人は、

$(selector).live();                // jQuery 1.3+
$(document).delegate(selector, events, handler);  // jQuery 1.4.3+
$(document).on(events, selector, handler);        // jQuery 1.7+
于 2012-10-03T16:49:09.390 に答える