Event-Handler funktioniert nicht, nachdem Element auf Fenstergröße verschoben wurde

Question

Ich bin neu in der Webprogrammierung und baue derzeit eine responsive Website. Bei der Fenstergrößenanpassung verschiebt sich die rechte Sidebar um die Methoden insertBefore() und appentTo(). Aber danach funktioniert der Event-Handler in der SideBar nicht mehr.

Eine einfache Ereignisbehandlungsmethode:

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

funktioniert nur, wenn ich zu entfernen:

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

Wie kann ich die Event-Handler Arbeit?

Answer 1

Als Sidebar entfernt und dann dynamisch der Seite hinzugefügt, Sie haben es auf diese Weise zu wählen:

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

jQuery die Ereignisse auf Last legt also, wenn Sie das Element aus der Seite entfernen, Alle Event-Handler, die daran angehängt sind, werden entfernt. Deshalb müssen Sie die Ereignisse delegieren, indem Sie sie auf dem $(document) Element aufrufen.

Arbeiten JSFiddle example.

Answer 2

Versuchen:

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

Answer 3

, wenn Sie einen Knoten entfernen, würde der Handler dieses Knotens entfernen, auch. Sie sollten also Ereignis erneut binden oder einfach Ereignisdelegat verwenden. Der Weg von @Hulothe ist Event-Delegate.