使用jQuery .on與使用.live？

Question

一個簡單的問題，因為jQuery .live（）的1.7版已被棄用，而推薦使用.on（）;。 但是.on（）似乎不適用於通過JavaScript渲染並加載到DOM中的元素。 所以我的問題是，仍然應該使用.live（）還是.on（）如何捕獲這些新生成的元素？

例如，這是我的代碼：

$("#listitem").append("<li id='removeitem'>" + 
       formdata + ' <a href="#">Remove</a></li>');

當我嘗試通過.on（）對這個元素進行操作時-結果什么都沒有，而.live（）能夠抓取這個元素。

$("#removeitem").live("click", function(event) { alert($(this).text()); });

Answer 1

live版：

$("#removeitem").live("click", function(event) { alert($(this).text()); });

應該更改為：

$("#containerId").on("click", "#removeitem", function(event) { 
    alert($(this).text()); 
});

其中containerId是removeitem加載到的靜態元素。

您可以簡單地將body用作靜態元素：

$("body").on('click', '#removeitem'm fn);

但是代碼的效率會降低，只需嘗試使用它來演示其工作原理。

---

筆記：

1. 希望您不要有多個具有相同id元素，因為它是無效的標記。
2. 看起來listitem是代碼中的靜態元素。

更新：

也許那是我的問題-我只是將.live替換為.on

您不能簡單地替換它們...它們以其他方式工作，並且具有不同的參數！

閱讀每個功能的文檔：

on ：

.on(events [, selector] [, data], handler(eventObject)) 

live ：

.live( events, handler(eventObject) )

Answer 2

您應該嘗試使用.on()這樣：

$('#listitem').on('click', '#removeitem', function() {
    alert($(this).text());
});

演示

如果您沒有諸如removeitem類的固定ID，並且其結構如removeitem1 ， removeitem1等，則嘗試：

$('#listitem').on('click', '[id^=removeitem]', function() {
    alert($(this).text());
});