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>