Question

我正在尝试以这种方式添加动态onclick，

function addStudent(data) {
    var row = $('#students').append('<tr itemId="' + data.ID + '" ></tr>');
    row.on("click", function () {
        console.log(data.ID);  // THIS IS JUST FOR TESTING
        //loadStudent(data);
    });
}

为什么在控制台中我点击一行时会得到所有ID？

问题？

单击任何行，我在控制台中获取此示例中的所有数据或学生ID。

修改

请注意data.ID就在这里，例如你可以看到我注释掉了我将完整对象传递给另一个方法的真实代码。

Answer 1

要将点击事件附加到<tr>，您需要像这样写：

$('<tr itemId="' + data.ID + '" ></tr>').appendTo('#students').on("click", function () {
        console.log(data.ID);
        //loadStudent(data);
    });

这将创建<tr>将其附加到#students，然后将点击事件附加到新创建的<tr>

如果要将数据传递给事件，可以这样做：

$('<tr itemId="' + data.ID + '" ></tr>').appendTo('#students').on("click", { value: data }, function () {            
        var theData = event.data.value;
        console.log(theData.ID);
        //loadStudent(theData);
    });

有关此概念的更多信息，请参阅here。

Answer 2

为什么在控制台中我点击一行时会得到所有ID？

因为每次调用addStudent时，都会绑定函数内的其他单击处理程序。

使用委托将单击处理程序绑定在函数外部。

$('#students').on('click', 'tr', function(){
     console.log(data.ID);
        //loadStudent(data);
    });

jQuery动态onclick

2 个答案: