Click-Ereignis ist nicht an dynamische Elemente gebunden, wenn appendTo()

Question

verwendet wird Ich weiß, dass ich für dynamische dom-Elemente jQuery.fn.on oder Delegate verwenden muss, aber wenn ich den Elementcontainer an ein anderes Elemente in 'verschieben' Das dom, der Klick funktioniert nicht mehr.

Hier ist das die jsFiddle das Problem zu reproduzieren: http://jsfiddle.net/j0L7c51f/

derzeit folgende Methode bind ich verwende:

$('#commoditySelector').on('click', 'li.available', function() { 
    var cmID = $(this).attr('data-cmid'); 
    $('#debug').html('commoditySelected: '+ cmID); 
}); 

Wenn ich den Code Zeile aus kommentieren, wo ich das ul-Element bewegen Mit appendTo() funktioniert die click-Ereignisgrenze gut.

Answer 1

Das Problem wird durch die Verwendung von mousemove verursacht, nicht durch den delegierten Ereignishandler, da der HTML-Code jedes Mal neu erstellt wird, wenn sich die Maus bewegt. Dies bedeutet, dass der delegierte Event-Handler für ein angeklicktes Element korrekt ausgelöst wird, dieses Element jedoch sofort aus dem DOM entfernt wird. Daher wird das Ereignis abgebrochen, bevor es das zu verarbeitende DOM weitergibt.

um dieses Problem zu beheben, verwenden Sie das mouseenter Ereignis auf dem a statt:

$('#commodityCategories li a').mouseenter(function(e) { 
    // your code... 
}); 

Updated fiddle