Question

我目前正在填充一個HTML表格來顯示用戶。我使用對API的調用來將我的用戶數據提供給表，並使用Javascript將該行附加到表中。每一行中的最後一個入口設有一個刪除按鈕，這是爲了傳遞用戶數據作爲$投放到一個單獨的API端點來刪除相應行的用戶：

//Existing adhoc-users table. 
var adhocUsersHtml = "<div><table class='table table-striped'><tr><th>Section</th><th>Role</th><th>First Name</th><th>Last Name</th></tr>"; 
$.each(json.sections, function (index, section) { 
    $.each(section.enrollments, function(index, user) { 
     if (user.adhocEnrollment == true) { 
      adhocUsersHtml += "<tr><td>" + section.sectionTitle + "</td><td>" + user.roleName + "</td><td>" + user.firstName + "</td><td>" + user.lastName + "</td>" 
       + "<td><button id='delete' class='btn btn-default' data-style='height: 30px; margin-top: 0;'>Delete</button></td></tr>"; 
     } 
    }); 
}); 
adhocUsersHtml += "</table></div>"; 
return adhocUsersHtml; 

什麼是最好的方式爲作用域「這'與刪除按鈕？

我應該在保存該行用戶標識的按鈕上放置一個自定義屬性，然後將onClick添加到抓取該標識的所有刪除按鈕並執行$ put？

是否可以在聲明HTML之前添加一個onClick函數，然後再將它附加到帶有Javascript的DOM？

Answer 1

將用戶標識放入刪除按鈕的數據屬性中，並向表中添加單個事件處理程序以處理所有刪除按鈕點擊。

<button class='delete-user-btn' data-id="myUserId">Delete</button> 

$("#myTable").on("click", ".delete-user-btn", function() { 
    var id = $(this).attr("data-id"); 
    //delete code goes here 
}); 

Answer 2

首先，你將有很多按鈕，這樣屬性ID =「刪除」所有按鈕後不appropiate

我會把類「刪除」，而不是沒有帳戶及註冊的onClick監聽器呈現 ，並且由於每一行代表一個用戶，我會在每行上放置ID

<tr data-val="{userID}"> 
    .... 
    <td><button class='btn btn-default delete' data-style='height: 30px; margin-top: 0;'>Delete</button></td> 
</tr> 

<script>$('.delete').on('click', function(e) { 
var tr = $(e.target).closest('tr'), 
id = tr.data('val') 
... do your code 
})</script>