如何在 html 字符串中 quote/add javascript 变量？

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>

但我不确定为什么触发 viewskpd() 的 onclick 函数不起作用。

我检查了控制台，它告诉我这样的。

Uncaught SyntaxError: Invalid or unexpected token

为什么会这样？

Answer 1

oData.id 需要用引号引起来，因此它是一个用不同引号引起来的字符串，而不是包含 onclick 属性：

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

完整：

$([=11=]).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>");

Answer 2

为什么不给 <button class='btn btn-info btn-sm' ... 分配一个 ID 并在 JS 中编写它的 click 事件？

无论您在哪个位置 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

实际上，您需要在 viewskpd 函数中使用一个 string 变量。使用 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 5

或者您可以使用 `.请注意，这是一个不同于"和'的特定字符。然后将变量括在${}中，这样可以提高可读性：

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>`;

如何在 html 字符串中 quote/add javascript 变量？

How to quote/add javascript variable in html string?

html

javascript

onclick

uncaught-exception