传递一些变量参数时，我如何正确使用 onclick() 方法，即这种情况下的参数是 Mongoose 对象文档的 ID？

Question

So I'm dynamically appending rows to a table on front-end, based on the array I get from a node.js API I wrote. The array indicates students. For each row I append and display Name , Class , Roll_No and a dynamic button whose color changes depending on the value I get from that specific student. Now for that button I use the following tag:

$('#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 indicates the current element of the students array, which is a mongoose object. Now I get an error whenever I click the appended button and the add_remove_student() method is not called. The error says:

uncaught SyntaxError: Invalid or unexpected token

val._id is a Mongoose ID of that particular Mongoose object and val.is_linked is a boolean value.

The onclick() in the button tag worked before I switched to node.js

I've scratched my head so many times as to what I'm doing wrong. Any help would be greatly appreciated!

Answer 1

The short answer: don't use onclick , or any other of the onX inline event attributes. They are outdated, lead to spaghetti code and don't follow the separation of concerns principle.

A much better way to achieve this would be to just add the relevant meta data to the element as data attributes. Then, using a single delegated event handler, you can read that metadata from the element which was clicked. Try this:

 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>

As a side note, don't use id attributes in content which will be dynamically repeated. id need to be unique in the DOM. Use class attributes instead.

If, for whatever reason, you absolutely had to use an inline event attribute you need to fix your quotes so that they match, and you also need to escape the quotes you use in the onclick value so they don't interfere with the outer string:

$('#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

Okay so I've wrecked my brain for 24 hrs to solve this and after understanding how escape quotes characters work i've finally solved it with the following code:

$('#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>`);

Thank You ^^

Answer 3

This is the issue of mixing of quotes please re verify the quotes on the function calling in jquery. Plus please made an id of the element dynamic.