Question

有点难以解释，我正在使用.after（）jquery函数将html放在div容器中，然后在其中一个标签中有一个onclick属性来调用一个传递字符串的函数（javascript变量），但是这个变量需要用引号括起来才能使javascript函数起作用：

注意，after函数似乎用html属性的双引号替换单引号？

$("#outputsContainer tr:last").after(
    "<tr>\
       <td>"+value.name+"</td>\
       <td>"+value.status+"</td>\
       <td>\
          <a href='" + value.delete + "' onclick='" + myfunction(value.status) + "'>Delete</a>\
          <a href='" + value.download + "'>Download</a>\
       </td>\
    </tr>");

我设法在函数中获取变量值，但似乎无法轻易地在其周围放置引号

输出：

<a href="/item/4/download" onclick="myfunction(complete)">Download</a>

我所追求的（注意完整的报价）：

<a href="/item/4/download" onclick="myfunction('complete')">Download</a>

帮助表示感谢，谢谢！

Answer 1

尝试在JavaScript中将一串javascript连接成一串HTML，这只会给你一个很难维护的字符串。

打破问题。使用现有的DOM功能来帮助您。

var row = jQuery('<tr>');

var name_cell = jQuery('<td>');
name_cell.text(value.name);
row.append(name_cell);

var status_cell = jQuery('<td>');
name_cell.text(value.status);
row.append(status_cell);

var links_cell = jQuery('<td>');

var delete_link = jQuery('<a>');
delete_link.attr('href', value.delete);
delete_link.on('click', function () {
    myfunction(value.status);
});
delete_link.text('Delete');
links_cell.append(delete_link);

var download_link = jQuery('<a>');
download_link.attr('href', value.download);
download_link.text('Download');
links_cell.append(download_link);

$("#outputsContainer tr:last").after(row);

Answer 2

尝试像onclick=\"" + "myfunction('"+value.status+"')" +

一样逃避它们

$("#outputsContainer tr:last").after(
    "<tr>\
       <td>"+value.name+"</td>\
       <td>"+value.status+"</td>\
       <td>\
          <a href='" + value.delete + "' onclick=\"" + "myfunction('"+value.status+"')" + "\">Delete</a>\
          <a href='" + value.download + "'>Download</a>\
       </td>\
    </tr>");

DEMO

Answer 3

+1 @Quentin所说的并且正确地执行它而不是构建HTML字符串，但是使用jQuery的链接和attributes constructor可以更容易地构建代码：

var row = $('<tr>').append(
    $('<td>', {text: value.name}),
    $('<td>', {text: value.status}),
    $('<td>').append(
         $('<a>', {text: 'Delete', href: value.delete}).click(function () {
             myfunction(value.status);
         }),
         $('<a>', {text: 'Download', href: value.download})
    )
);
$("#outputsContainer tr:last").after(row);

在函数之后使用字符串转义jquery中的引号

3 个答案: