2009-04-20 32 views
19

replaceWith DOMの1つを取り出す要素がある場合は、replaceWithに戻ってそれに登録されたイベントは起動しません。私は無傷のままにするためにイベントが必要です。デモでreplaceWith後にイベントが登録されていません

var replacement = $(document.createElement('span')); 
var original = $(this).replaceWith(replacement); 

replacement 
    .css('background-color', 'green') 
    .text('replacement for ' + $(this).text()) 
    .click(function() { 
     replacement.replaceWith(original); 
    }); 

Live demo

、あなたが要素をクリックしたとき、それは別の要素がreplaceWithを使用してに置き換えられます。

は、ここに私のJavascriptです。新しい要素をクリックすると、replaceWithを使用して元の要素に置き換えられます。しかし、クリックハンドラはそれ以上は動作しません(私はそれがすべきだと思う)。

+1

イベントの再接続が終了したのですか、またはライブイベントが動作するようになりましたか?私はまったく同じことをしており、あなたの経験から学ぶことが大好きです。 –

+0

@エリックT、申し訳ありませんが、正直言って覚えていません。私はこの質問をほぼ2年前に聞いた。セレクタではなく、実際の要素を扱っていたので、 '$ .fn.live'を使ってもうまくいきませんでした。 ( '$ .fen.delegate'(存在しなかったもの)は、' live'の代わりとしてあなたのために働くかもしれません。)私が選択した答えのため、私はイベントハンドラを再接続することになったと仮定します。要素を深くクローンすることもできます(IIRCは最新のjQueryでイベントハンドラを保持する可能性があります)。 – strager

答えて

11

元の要素を置き換えると、元の要素にバインドされたイベントが削除されるためです。あなたはreplacement.replaceWith(original)に呼び出した後originalclickイベントハンドラを再接続する必要があります:で、live()bind()が廃止されました:

$(function() 
{ 
    function replace() 
    { 
     var replacement = $(document.createElement('span')); 
     var original = $(this).replaceWith(replacement); 

     replacement 
     .css('background-color', 'green') 
     .text('replacement for ' + $(this).text()) 
     .click(function() 
     { 
      replacement.replaceWith(original); 
      original.click(replace); 
     }); 
    } 

    $('.x').click(replace); 
}); 
+2

これを行うための自動でエレガントな方法がありましたら幸いです。私はこの解決策がしなければならないと思う。 – strager

+1

@strager:Mattのライブイベントの提案を試してみるか、目的のバージョンを実装することができます。分離された要素からイベントを切り離さないと、特定のブラウザ*に深刻な(そして不愉快な)副作用があるため、実際にこのように動作させたいと思っています。 – Shog9

+0

これは意味をなさない。要素にはDOMにアタッチされていないイベントがある可能性があります。そのため、DOMから削除するとイベントが削除されるのはなぜですか?パフォーマンスに関する特定の決定でなければなりません。 – Alex

3

live eventsはあなたが

+0

5月私が必要とするものである。私はそれを調べます。 – strager

+0

動作していないようです。奇妙な= S – strager

+1

jQuery 1.9では動作しなくなりました。 – YaDa

4

UPDATE探しているものですon()の賛成です。

$(function() { 
$('.x').live('click', function() { 
    var replacement = $(document.createElement('span')); 
    var original = $(this).replaceWith(replacement); 

    replacement 
     .css('background-color', 'green') 
     .text('replacement for ' + $(this).text()) 
     .bind('click', function() { 
      replacement.replaceWith(original); 
     }); 
}); 
}); 

- ライブイベントはjQueryの1.3と上で動作します:

あなたがlive()bind()イベントを使用することができ、これはあなたの新しいコードです。

ライブ配信を停止する場合は、die()機能を使用します。

関連する問題