ウィンドウ上の要素を移動した後でイベントハンドラが機能しない

Question

私はウェブプログラミングには新しく、現在はレスポンシブウェブサイトを構築しています。ウィンドウのサイズ変更イベントでは、右サイドバーはinsertBefore（）およびappentTo（）メソッドによって移動します。しかしその後、サイドバーのイベントハンドラはもう動作しません。

単純なイベントハンドラメソッド：私は削除した場合にのみ

$('#sideBar').mouseover(function(){ 
    alert("hello"); 
}); 

作品：

function setlayout(){ 
    if($(window).width() <= 720){ 
    $('#sideBar').insertBefore('#footer'); 
    }else{ 
    $('#sideBar').remove().appendTo('#navbar'); 
    } 
}; 
$(window).on('resize load', function(){ setlayout() }); 

がどのように私は、イベントハンドラの仕事を作るのですか？

Answer 1

サイドバーが除去されると、その後動的がページに追加、あなたはそれをこの方法を選択する必要があります：あなたがページから要素を削除するので、もし

$(document).on('mouseover', '#sideBar', function() { 
    alert('hello'); 
}); 

jQueryのは、負荷のイベントを添付し、それに接続されているすべてのイベントハンドラが削除されます。だからこそを代理人$(document)要素で呼び出すことによってイベントに参加させる必要があります。

作業JSFiddle example。

Answer 2

試してみてください。

$('#sideBar').appendTo('#navbar').remove(); 

Answer 3

ノードを削除する場合、このノードのハンドラは、あまりにも、削除します。 イベントを再バインドするか、単にイベントデリゲートを使用する必要があります。 @Hulotheの方法はイベントデリゲートです。

$(document).on('mouseover', '#sideBar', function() { 
    alert('hello'); 
});