使用appendTo（）時，點擊事件未綁定到動態元素

我知道，對於動態dom元素，我需要使用jQuery.fn.on或委託，但如果我'移動'元素容器追加到另一個元素dom，點擊不再有效。使用appendTo（）時，點擊事件未綁定到動態元素

這裏是該的jsfiddle重現該問題： http://jsfiddle.net/j0L7c51f/

目前我使用下面的方法綁定：

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

如果我註釋掉的代碼行我動的UI元素使用appendTo（），單擊事件綁定工作正常。

來源

2016-11-08 Giox

該問題是由於您使用mousemove而不是委託事件處理程序造成的，因爲每次鼠標移動時都會重新構建HTML。這意味着委託的事件處理程序在點擊元素上正確觸發，但該元素立即從DOM中移除，因此事件在傳播到要處理的DOM之前被取消。

要解決此問題，請使用a而不是mouseenter事件：

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

Updated fiddle

來源

2016-11-08 17:13:26

完美MR。 Rory –

@Rory你完全正確！而且你也知道爲什麼如果我將鼠標移動到主要三個列表項目上，那麼下拉列表會打開並關閉好幾次，就好像隊列沒有被取消一樣？我已經嘗試了stop（）和clearQueue（） – Giox

是的 - 你需要在'mouseenter'和'mouseleave'的＃商品列表元素上調用'stop（true）'：http://jsfiddle.net/ j0L7c51f/5 /。我還做了一些調整來清理一些重複的選擇器。 –

使用appendTo（）時，點擊事件未綁定到動態元素

回答

相關問題