jQuery處理臨時元素

我有一個ID列表，其中沒有列表項。在我的jQuery腳本中，我有一個函數將#list中的HTML設置爲某些列表項。jQuery處理臨時元素

$('#list').click(function() { 
    $('#list').html("<li> blah </li> <li> blooh </li>"); 
});

但後來，當我試圖操縱$（ '＃名單禮'）：

$('#list li').mouseenter(function() { 
    this.style.backgroundColor = "red"; 
});

它似乎並沒有工作。有任何想法嗎？

來源

2014-03-29 user3457652

的可能重複[由動態生成的元素觸發的事件不會被事件處理程序捕獲]（http://stackoverflow.com/questions/12829963/events-triggered-by-dynamical ly-generated-element-are-not-by-event-hand） –

and [Event binding on dynamic created elements？]（http://stackoverflow.com/questions/203198/event-binding-on-dynamically-創建元素） –

它不工作，因爲點擊處理程序只適用於DOM中的東西。試試這個：

$('#list').delegate('li','click',function(){ 
    this.style.backgroundColor = "red"; 
});

代表將綁定那些尚未在DOM中存在的元素。

來源

2014-03-29 00:35:29

如果使用jQuery V1.7 +，使用.on()在其委託的形式，如：

$('#list').click(function() { 
    $('#list').html("<li> blah </li> <li> blooh </li>"); 
}).on("mouseenter", "li", function() { 
    this.style.backgroundColor = "red"; 
}).on("mouseleave", "li", function() { 
    this.style.backgroundColor = "white"; 
});

JSFIDDLE

注意，你可以鏈事件

來源

2014-03-29 00:37:41 JFK

我不知道'on'有一個「授權表單」。那個和'delegate'之間有什麼區別嗎？ –

@Mike：'delegate'已經過時並在內部調用'on'。請參閱https://api.jquery.com/delegate/。 –

jQuery處理臨時元素

回答

相關問題