检测从JQuery生成的表格中单击表格行 [英] Detect Click on Table Row from Generated Table with JQuery
问题描述
我试图检测表格行上的点击，但是我遇到了问题。该表是从一个JavaScript文件生成的，放在html内部的一个div中。这个div被命名为'tableOutput'。如果我将它设置为'tableOutput'，但我将其设置为'#myTable'，或'#myTable tr'，它将不会执行任何操作。有什么建议？
生成表的代码：
function loadUsers（ ）{
$ .getJSON（api / users，function（data）{
var userTable =\
var count = 1;
$ .each（data，function（key，value）{
userTable = userTable +< tr id = \ tr+ count +\>< td>+ value [userID] +< / td>< td>+ value [userName] +< / td><< ;td>+ value [password] +< / td>< td" + value [firstName] +< / td>< td" + value [ < / td>< td>+ value [email] +< / td>< td>+ value [phone] + lt; / td>< td>+ value [dateOfBirth] +< / td>< td>+ value [enabled] +< / td>< / tr>;
count = count + 1;
}）;
userTable = userTable +< / table>;
$（＃tableOutput）。html（userTable）;
}
）;
检测到点击的代码：
$（document）.ready（function（）{
$（'＃dp1'）。datepicker（）;
loadUsers（）; $ （click，function（）{
alert（$（this）.attr（id））;
}（'＃mt tr'）。 ）;
}）;
您需要事件代表团将事件绑定到动态添加的元素。既然你有表格的静态父母，那么ID tableOutput 的div可以委托给它。
$（'＃tableOutput'）。on（click，'#myTable tr'，function（）{
alert（$（this）.attr（id））;
}）;
委派的活动
委托事件的优点是，它们可以处理来自后面添加到文档中的
后代元素的事件。通过
挑选一个保证在
委托事件处理程序附加时存在的元素，可以将委派事件用于
，避免需要经常附加和删除事件处理程序， a href =https://api.jquery.com/on/ =noreferrer> jQuery文档
I am trying to detect a click on the table rows, but I'm having problems. The table is generated from a javascript file and is placed inside a div inside the html.This div is named 'tableOutput'. My jquery click function will work if I set it to 'tableOutput', but I set it to '#myTable', or '#myTable tr' it will not do anything. Any advice? Thanks!
Code that generates the table:
function loadUsers() {
$.getJSON("api/users", function(data) {
var userTable = "\
<table id=\"mt\" class=\"table table-hover\"><tr><th>User ID</th><th>User Name</th><th>Password</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Phone</th><th>DOB</th><th>Enabled</th></tr>";
var count = 1;
$.each(data, function(key, value) {
userTable = userTable + "<tr id=\"tr" + count + "\"><td>" + value["userID"] + "</td><td>" + value["userName"] + "</td><td>" + value["password"] + "</td><td>" + value["firstName"] + "</td><td>" + value["lastName"] + "</td><td>" + value["email"] + "</td><td>" + value["phone"] + "</td><td>" + value["dateOfBirth"] + "</td><td>" + value["enabled"] + "</td></tr>";
count = count + 1;
});
userTable = userTable + "</table>";
$("#tableOutput").html(userTable);
}
);
}
Code that detects the click:
$(document).ready(function() {
$('#dp1').datepicker();
loadUsers();
$('#mt tr').on("click", function(){
alert($(this).attr("id"));
});
});
You need event delegation to bind event to dynamically added elements. Since you have static parent of the table the div with id tableOutput you can delegate event to it.
$('#tableOutput').on("click", '#myTable tr', function(){
alert($(this).attr("id"));
});
Delegated events
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery docs
这篇关于检测从JQuery生成的表格中单击表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
