Question

我通过Ajax响应在我的jquery中填充表。我需要点击表格的行来填充更多信息。当我单击该行以提取row_id时，使用以下代码：

(function(){
    $('#bags_table tr').click(function() {
            alert(1)
          alert($(this).attr('id')); //trying to alert id of the clicked row          

    });
});

单击该行后，警报不会发生。在查看页面源时，它显示一个空表。

我正在生成这样的表格。

function bags_table_func(result){

    var rows = "<tr><th>Seal No.</th><th>Status</th><th>Destination</th><th>Total Packets</th><th>Max. Weight</th>" + 
               "<th>Min. Weight</th><th>Avg. Weight</th><th>Total Weight</th></tr>"

    for (var obj in result){
        if (obj == 'last_bagged_on'){
                continue
        }
        else if (result[obj]['status'] == undefined){
            rows += "<tr><td>No Content</td></tr>"
            break
        }
        rows += "<tr id = '"+obj+"'><td>" + obj+"</td><td>" + result[obj]["status"] + "</td><td>" + 
                    result[obj]["destination"] + "</td><td>" + result[obj]["total_packets"] + "</td><td>" + 
                    result[obj]["max_weight"] + "</td><td>" + result[obj]["min_weight"] + "</td><td>" + 
                    result[obj]["avg_weight"] + "</td><td>" + result[obj]["total_weight"] + "</td><td><a href = '#'>Details</td></tr>"
    }
    $("#bags_table").html(rows);
}

如何使Ajax Response生成表点击？

Answer 1

当您通过代码生成表格时，您应该使用event delegation method

$(document).on('click','#bags_table tr',function() {
     alert(1)
     alert($(this).attr('id')); //trying to alert id of the clicked row          
});

Answer 2

使用event delegation

尝试.on()

$(document.body).on('click','#bags_table tr',function () {
   alert(1)
   alert($(this).attr('id')); //trying to alert id of the clicked row          
});

您的表行在运行时附加，并且运行时添加的元素无法在视图源中显示，您无法将本机事件绑定到这些元素，您需要事件委派。

此处代替document/document.body，您可以拥有最接近的父元素

表行未显示在页面源中

2 个答案: