jQuery，如何選擇動態生成的html元素

Question

我下面的Javascript代碼動態生成了以下html，

 <tbody> <tr class="student"> <td class="missed-col">0</td> </tr> </tbody> 

生成上面的html的代碼，

 var $tbody = $('tbody'); var $row = $('<tr></tr>').addClass('student'); var $nameCol = $('<td></td>').addClass('name-col').text(name); var $missedCol = $('<td></td>').addClass('missed-col').text('0'); $row.append($nameCol); $row.append($missedCol); $tbody.append($row); 

然后，我想在missed-col類之前再插入一行。 由於某種原因，由於代碼跳轉到另一個功能塊中，因此我無法在上面的代碼中引用$ missedCol。 所以，我做了以下事情，

 $('<td class="attend-col"><input type="checkbox"></td>').insertBefore($('tbody tr .missed-col')); 

但是，它不起作用。 我看到的原因是jQuery無法以這種方式選擇動態生成的元素。 我在網上發現了一些類似的問題，但是找不到一個好的答案。

Answer 1

嘗試將選擇器傳遞給insertBefore()而不是傳遞jquery對象，因為這是一個過大的選擇。

HTML代碼：

$('<td class="attend-col">3</td>').insertBefore('tbody tr .missed-col');

工作演示@ jsfiddle

Answer 2

使用LIVE或ON方法可以實現所需的http://api.jquery.com/live/

下面是一個簡單的例子

 var counter = 0; $("button").click(function() { $("h2").append("<p class='test'>click me " + (++counter) + "</p>") }); // With on(): $("h2").on("click", "p.test", function(){ alert($(this).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <h2></h2> <button>generate new element</button> 

Answer 3

我沒有問題，可以將這段代碼放到$(document)ready並用table代替tbody的地方。

 $(document).ready(function(){ var $tbody = $('table'); var $row = $('<tr></tr>').addClass('student'); var $nameCol = $('<td></td>').addClass('name-col').text("test"); var $missedCol = $('<td></td>').addClass('missed-col').text('0'); $row.append($nameCol); $row.append($missedCol); $tbody.append($row); $('<td class="attend-col"><input type="checkbox"></td>').insertBefore('table tr .missed-col'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> </table> 

Answer 4

看一下代碼片段。

 $(function(){ var $tbody = $('tbody'); var $row = $('<tr></tr>').addClass('student'); var $nameCol = $('<td></td>').addClass('name-col').text(name); var $missedCol = $('<td></td>').addClass('missed-col').text('0'); $row.append($nameCol); $row.append($missedCol); $tbody.append($row); console.log($tbody.find(".student")); //below line did the trick $('<td class="attend-col"><input type="checkbox"></td>').insertBefore($tbody.find("tr .missed-col")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr class="student"> <td class="missed-col">0</td> </tr> </tbody> </table>