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);

然后，我想在miss-col类之前插入一行。由于某些原因，我无法在上面的代码中引用$ missedCol，因为代码会跳转到不同的功能块中。所以，我做了以下，

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

然而，它不起作用。我看到原因是jQuery无法以这种方式选择动态生成的元素。我在网上发现了一些类似的问题，但找不到一个好的答案。

Answer 1

尝试将选择器传递给insertBefore()，而不是传递jquery对象，因为它太过分了。

HTML CODE：

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

Working demo @ jsfiddle

Answer 2

使用LIVE或ON方法可以达到你想要的效果 http://api.jquery.com/live/

下面的

是

的简单示例

＆＃13;

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());
});

＆＃13;

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

＆＃13;

Answer 3

我没有将此代码放入tbody并将table替换为$(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>

textField

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>

jQuery，如何选择动态生成的html元素

4 个答案: