Question

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

这是代码的一部分。

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

如您所见，我为每一行td设置了唯一ID。然后我连接到click事件。但是，单击它后单击事件不会触发。没有显示错误。

我做错了吗？

编辑：Link to 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

见：

example

未定义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 );

});

该表的可点击的第二个td不起作用

5 个答案: