檢測點擊從JQuery生成表格中的表格行

我想檢測表格行上的點擊，但我遇到了問題。該表是從一個JavaScript文件生成的，放在html內部的一個div中。這個div被命名爲'tableOutput'。如果我將它設置爲'tableOutput'，但我將其設置爲'#myTable'，或'#myTable tr'，它將不會執行任何操作。有什麼建議？謝謝！生成表檢測點擊從JQuery生成表格中的表格行

代碼：檢測到點擊

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); 
} 
); 
}

代碼：

$(document).ready(function() { 
$('#dp1').datepicker(); 
loadUsers(); 

$('#mt tr').on("click", function(){ 
    alert($(this).attr("id")); 
}); 
});

來源

2014-03-24 billabrian6

我覺得你的表沒有你綁定點擊的時間，因爲getJSON是psudo-async –

您需要event delegation綁定事件動態添加元素。由於您擁有表格ID爲tableOutput的div的靜態父項，您可以將事件委託給它。

$('#tableOutput').on("click", '#myTable tr', function(){ 
    alert($(this).attr("id")); 
});

委派事件

委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間後代元素的事件。通過採摘這是保證出席委派的事件處理程序連接時的元素，你可以使用委派事件避免需要經常重視和移除事件處理程序，jQuery docs

來源

2014-03-24 19:39:35 Adil

非常感謝！我不敢相信這是一個簡單的解決方案。 – billabrian6

檢測點擊從JQuery生成表格中的表格行

回答

相關問題