Demo

Question

在id productTable的表中，我使用以下jquery代码添加行：

$('#productTable').html("");
for (var i = 0; i < result.count; i++) 
{
        $('#productTable').append('<tr id=' + result.productArray[i].productID + 'class="product"><td><a> '+result.productArray[i].productName+'</a></td></tr>');
}

我正在使用以下方法将处理程序附加到这些行：

$("#productTable").on("click","tr",function(event){
                alert(this.id);
            });

但是我得到的ID是表格，而我想要点击的行的ID。

帮助

Answer 1

问题在于您要附加的内容，它是无效的HTML

$('#productTable').append(
    '<tr id=' + result.productArray[i].productID + 'class="product">
         <td>
             <a> '+result.productArray[i].productName+'</a>
         </td>
     </tr>'
);

仔细看，ID周围没有引号，没有空格分隔ID和类基本上你最终会

<tr id=idclass="product">
     <td>
         <a>text</a>
     </td>
 </tr>

正确的代码是

$('#productTable').append('<tr id="' + result.productArray[i].productID + '" class="product"><td><a> '+result.productArray[i].productName+'</a></td></tr>');

Answer 2

试试这个：

$('#productTable').html("");
for (var i = 0; i < result.count; i++) 
{
    var obj = $('<tr id=' + result.productArray[i].productID + 'class="product"><td><a> '+result.productArray[i].productName+'</a></td></tr>');
    $(obj).click(function(event){
        alert($(this).attr("id"));
    });
    $('#productTable').append(obj);
}

Answer 3

Bind 动态创建元素时的事件。这是另一种做你想做的事情。

$('#productTable').html("");
for (var i = 0; i < result.count; i++) 
{
    $('#productTable').append('<tr id=" + result.productArray[i].productID + " class="product"><td><a> '+result.productArray[i].productName+'</a></td></tr>');
    $('#'+result.productArray[i].productID).bind('click',function(){
       //put your code here
    });
}

获取动态创建的行的id

3 个答案:

Demo