傳遞一些變量參數時，我如何正確使用 onclick() 方法，即這種情況下的參數是 Mongoose 對象文檔的 ID？

Question

因此，我根據從我編寫的 node.js API 獲得的數組動態地將行附加到前端的表中。 該數組表示學生。 對於每一行，我附加並顯示Name 、 Class 、 Roll_No和一個動態按鈕，其顏色根據我從該特定學生獲得的值而變化。 現在對於那個按鈕，我使用以下標簽：

$('#users').append("<tr><td>" + (i + 1) + "</td><td>" + val.first_name + " " + val.last_name + "</td><td>" + val.roll_no + "</td><td>" + val.class + "</td><td><button id='tempButton' class='btn btn-danger' onclick='add_remove_student(" + val._id + ", " + val.is_linked + ")'>DELETE</button></td></tr>");

val表示學生數組的當前元素，它是一個貓鼬對象。 現在，每當我單擊附加按鈕並且未調用add_remove_student()方法時，我都會收到錯誤add_remove_student() 。 錯誤說：

未捕獲的語法錯誤：無效或意外的令牌

val._id是該特定 Mongoose 對象的 Mongoose ID，而val.is_linked是布爾值。

在我切換到 node.js 之前，按鈕標簽中的onclick()起作用了

對於我做錯了什么，我已經多次撓頭。 任何幫助將不勝感激！

Answer 1

簡短的回答：不要使用onclick或任何其他onX內聯事件屬性。 它們已經過時，導致意大利面條式代碼並且不遵循關注點分離原則。

實現這一點的更好方法是將相關元數據作為data屬性添加到元素中。 然后，使用單個委托事件處理程序，您可以從單擊的元素中讀取該元數據。 嘗試這個：

 let i = 0; let val = { _id: "5e4780d3cfbe57182499506a", role: ["STUDENT"], is_active: true, linked_students: [], first_name: "test_fname", last_name: "test_lname", email: "t1@t.com", roll_no: "537", class: 7, description: "im a test user mate!", created_at: "2020-02-15T05:25:39.077Z", updatedAt: "2020-02-15T05:25:39.077Z", v: 0, is_linked: true } $('button').on('click', function() { $('#users').append(`<tr><td>${(++i)}</td><td>${val.first_name} ${val.last_name}</td><td>${val.roll_no}</td><td>${val.class}</td><td><button class="delete btn btn-danger" data-id="${val._id}" data-linked="${val.is_linked}">DELETE</button></td></tr>`); }); $('#users').on('click', '.delete', function() { let $btn = $(this); let id = $btn.data('id'); let isLinked = $btn.data('linked'); console.log(id, isLinked); // do something with the above data... $(this).closest('tr').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Append</button> <table id="users"></table>

作為旁注，不要在將動態重復的內容中使用id屬性。 id需要在 DOM 中是唯一的。 請改用class屬性。

如果，無論出於何種原因，您絕對必須使用內聯事件屬性，您需要修復您的引號以使其匹配，並且您還需要轉義您在onclick值中使用的引號，以便它們不會干擾外部字符串：

$('#users').append('<tr><td>' + (i + 1) + '</td><td>' + val.first_name + ' ' + val.last_name + '</td><td>' + val.roll_no + '</td><td>' + val.class + '</td><td><button id="tempButton" class="btn btn-danger" onclick="add_remove_student(\"' + val._id + '\", \"' + val.is_linked + '\")">DELETE</button></td></tr>');

Answer 2

好的，所以我已經破壞了我的大腦 24 小時來解決這個問題，在了解轉義引號字符的工作原理后，我終於用以下代碼解決了它：

$('#users').append(`<tr><td>` + (i + 1) + `</td><td>` + val.first_name + ` ` + val.last_name + `</td><td>` + val.roll_no + `</td><td>` + val.class + `</td><td><button id="tempButton" class="btn btn-danger" onclick='add_remove_student(\"` + val._id + `\",\"` + val.is_linked + `\")'>DELETE</button></td><tr>`);

謝謝你^^

Answer 3

這是引號混合的問題，請重新驗證jquery中調用函數的引號。 另外，請動態設置元素的 id。