Как процитировать / добавить переменную JavaScript в HTML-строку?

Question

Я пытался использовать, как это

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd('"+oData.id+"')' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

Но все прошло так:

<button class="btn btn-info btn-sm" onclick="viewskpd(" 00cc72988f8240428b25ac5327b2a3c6')'="" data-toggle="tooltip" title="" data-original-title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button>

Но я не уверен, почему функция onclick, которая вызывает viewskpd(), не сработала.

Я проверил консоль, и она сказала мне вот так.

Uncaught SyntaxError: Invalid or unexpected token

Почему это происходит?

Answer 1

На самом деле вам нужна переменная string внутри функции viewskpd. Для этого используйте функцию toString(), вы должны написать так:

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd("+oData.id.toStirng()+")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

00cc72988f8240428b25ac5327b2a3c6 не имеет значения для JavaScript, пока вы не включите его в string.

Answer 2

Почему бы вам не присвоить идентификатор для <button class='btn btn-info btn-sm' ... и не запрограммировать его событие click в JS?

В любом месте, где у вас есть oData.id, вы можете сделать что-то вроде следующего.

<button id='id1' class='btn btn-info btn-sm' ...

Затем используйте этот id1 в качестве селектора и запрограммируйте событие click этого элемента, которое будет выглядеть как

$(document).on("click", "#id1", function(){
    viewskpd(oData.id); // Call the required function
});

Answer 3

Вы вводите какую-то довольно дикую территорию ... скрипт, внедренный в атрибуты разметки скриптами, которые, вероятно, изначально были внутри самого языка разметки. Не делай этого, это кошмар.

Попробуйте что-то вроде этого:

<button data-action="viewskpd" data-skpd-id="00cc72988f8240428b25ac5327b2a3c6" ...

В вашем сценарии ...

$(body).on('click', 'button[data-action="viewskpd"]', (e) => {
  console.log(e.target);  // 
});

Не проверено, но это должно помочь вам начать. Поместите ваши данные в разметку, но ваш скрипт в ваш скрипт. Держите их отдельно.

Answer 4

oData.id необходимо заключить в кавычки, поэтому это строка, заключенная в кавычки, отличные от заключенных в атрибут onclick:

onclick='viewskpd(\""+oData.id+"\")'

В полном объеме:

$($0).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd(\""+oData.id+"\")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");