jquery - 表格的可点击第二个 td 不起作用

Question

有一个 tbody id 为的表：table_tbody 我正在尝试在 jquery 中添加 10 行可点击的第二个 td。我创建了一个变量：element它是<tr>包含<td>s 的行。

这是代码的一部分。

for (var ind = 0; ind < 10; ++ind) {
   var elem = element.clone();
   elem.children().next().first().attr("id", "table_td" + ind.toString());
   $("#table_td" + ind.toString()).click({playerID: 0}, playerFunc);
   $('#table_tbody').append(elem);
}

如您所见，我正在为每一行的 second 设置唯一 id td。然后我将点击事件连接到它。但是，单击事件在我单击它后没有触发。没有显示错误。

我做错了吗？

编辑：链接到 JSFiddle

Answer 1

你把指令序列弄乱了一点；）

$("#table_td" + ind.toString())

在 DOM 树中查找元素但没有找到，因为您还没有添加它。您需要先附加元素，然后才能添加事件侦听器。这应该有效：

for (var ind = 0; ind < 10; ++ind) {
  var elem = element.clone();
  elem.children().next().first().attr("id", "table_td" + ind.toString());
  $('#table_tbody').append(elem);
  $("#table_td" + ind.toString()).click({playerID: 0}, playerFunc);
}

Answer 2

理想的方法是使用class而不是id.

for (var ind = 0; ind < 10; ++ind) {
   var elem = element.clone();
   elem.children().next().first().attr("class", "table_td");       
   $('#table_tbody').append(elem);
}

$(document).on('click', '.table_td', function(){
    playerFunc();
});

请看这个：http: //jsfiddle.net/JSWorld/ahzzK/6/

Answer 3

看到这个：

例子

playerFunc 没有在 for 上定义。

function playerFunc (){
    alert("hren" + this.playerID);
}

Answer 4

简单的问题是什么是地球上第一个..鸡蛋或鸡肉

for (var ind = 0; ind < 10; ++ind) {
  var elem = element.clone();
  elem.children().next().first().attr("id", "table_td" + ind.toString());
  $('#table_tbody').append(elem);
  $("#table_td" + ind.toString()).click({playerID: 0}, playerFunc);
}

Answer 5

.toString()当您实际上已经添加到字符串时不需要"string"+ num
使用.on()带有委托的方法动态生成的元素，
不需要使用选择器在每个第二个元素的目标中创建 click处理程序。for
:odd

http://jsfiddle.net/ahzzK/4/

$(document).ready(function() {

    var playerFunc = function() { // Function scope!
        alert("hren");
    }


    var element = $("<tr>")
              .append( $("<td />", {"text":"bla1"}) )
              .append( $("<td />", {"text":"bla2"}) );

    for (var i=0; i<10; i++) {
       var elem = element.clone();
       elem.children().next().first().attr("id", "table_td"+ i );
       $('#table_tbody').append(elem);
    }

    $("#table_tbody").on('click', 'td:odd', playerFunc );

});