Как правильно использовать метод onclick () при передаче некоторых переменных аргументов, т.е. аргументы в этом случае являются идентификатором объектного документа Mon goose?

Question

Таким образом, я динамически добавляю строки в таблицу на внешнем интерфейсе на основе массива, полученного из написанного мной node.js API. Массив указывает студентов. Для каждой строки я добавляю и отображаю Имя , Класс , Roll_No и кнопку динамика c, цвет которой изменяется в зависимости от значения, полученного из этого параметра c студент. Теперь для этой кнопки я использую следующий тег:

$('#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 указывает текущий элемент массива студентов, который является объектом mon goose. Теперь я получаю сообщение об ошибке всякий раз, когда нажимаю добавленную кнопку, а метод add_remove_student() не вызывается. Ошибка говорит:

uncaught SyntaxError: Неверный или неожиданный токен

val._id - это Mon goose ID этого конкретного объекта Mon goose и val.is_linked является логическим значением.

onclick() в теге кнопки работал до того, как я переключился на node.js

Я столько раз почесал голову, что я делаю неправильно. Любая помощь будет принята с благодарностью!

Answer 1

Хорошо, поэтому я разбил свой мозг на 24 часа, чтобы решить эту проблему, и после понимания того, как работают символы escape-кавычек, я наконец решил это с помощью следующего кода:

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

Это проблема смешивания кавычек, пожалуйста, проверьте цитаты в функции, вызывающей jquery. Плюс, пожалуйста, сделайте идентификатор элемента Dynami c.

Answer 3

Краткий ответ: не используйте 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>');