Question

我在ajax回调上生成html表，如

...
success: function (data) {
    if (data != undefined) {
        var table = $("<table id='carTable' />").addClass("table table-striped table-bordered table-condensed");
        var header = $("<thead/>").html("<tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th><th>g</th>");
        table.append(header);
        for (var i = 0; i < data.length; i++) {
            var row = $("<tr/>");
            row.append($("<td id='carId'/>").html(data[i].Id));
            row.append($("<td id='name'/>").html(data[i].Name));
            row.append($("<td/>").html(data[i].Color));
            row.append($("<td/>").html(data[i].Doors));
            row.append($("<td/>").html(data[i].Fuel));
            row.append($("<td/>").html(data[i].Injection));
            row.append($("<td/>").html(data[i].Desc));
            table.append(row);
        };
        $("#carsTable").html(table);
    }
},
...

在使用javascript的同一页面上，我想识别此carTable生成的代码段的表格行上的点击事件。

 $('#carTable tr').on('click', function (e) {
      console.log('click!');
  });

这是因为回调中生成的html以及它是如何解决的？

Answer 1

$(document).on('click', '#carTable tr', function(e) {
  console.log('click!');
});

在第二个参数中与选择器匹配的每次点击都会触发回调函数，无论是从第一次渲染页面还是在那里，或者稍后通过JavaScript添加。

但请注意，这确实会带来内部触发的价格，只需在文档的任何位置单击，jQuery将在内部检查条件是否匹配。

所以更好的方法是将click事件委托给表：

$('#carTable').on('click', 'tr', function(e) {
  console.log('click!');
});

基本相同，只是不绑定整个文档的每次点击。

在生成的html表上注册click事件

1 个答案: