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

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

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

Почему это случилось?

Источник

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>");
Источник

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

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

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

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

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

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

Источник

На самом деле вам нужно 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,

Источник

Почему бы вам не присвоить идентификатор <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
});
Источник

В качестве альтернативы вы можете использовать `. Обратите внимание, что это особый символ, отличный от "и". Затем заключите переменную в ${}, это улучшит читаемость:

let ntd = document.getElementById("ntd");
ntd.outerHTML = `<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></div>`;
Источник
Другие вопросы по тегам