javascript：onclick 功能不适用于电子邮件

Question

我有一个 javascript 和 在数据表的 ajax 中，我有这部分代码

{   "data": null, 
    "width": "10%",
    "render": function(data){
        icon2 = '<center><button type="button" class="btn btn-info m-btn m-btn--icon m-btn--icon-only btn-sm" ' +
            'data-toggle="m-tooltip" title="" onclick="sendEmail('+data.email+')" data-placement="top" data-original-title="' + 'Send Email' + ' "> <i class="la la-envelope"></i></button>';
        icon2 += '</center>';

    return icon2; }
}

还有一个函数

function sendEmail(email){
   console.log("email: ", email);
}

但是当我单击按钮时，在参数列表 ** 之后会出现一个错误，显示 **Uncaught SyntaxError: missing )。

还有其他解决办法吗？

Answer 1

因为文字必须被引用。

你不能只写：

onclick="sendEmail(bob@example.com)"

这种快速而肮脏的方法只是在数据中添加几个'，但这假设数据不会有任何其他问题（例如包括'、@987654324 @ 或新行）。

你应该：

1. 将数据编码为 JSON，使其成为有效的 JavaScript 文字
2. 对 HTML 中的特殊字符进行编码，这样它们就不会导致 HTML 解析问题

例如

const email = data.email;
const js_safe_email = JSON.stringify(email);
const html_safe_email = js_safe_email
     .replace(/&/g, "&")
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")
     .replace(/"/g, "&quot;")
     .replace(/'/g, "&#039;");
icon2 = '<center><button type="button" class="btn btn-info m-btn m-btn--icon m-btn--icon-only btn-sm" ' +
        'data-toggle="m-tooltip" title="" onclick="sendEmail('+html_safe_email+')" data-placement="top" data-original-title="' + 'Send Email' + ' "> <i class="la la-envelope"></i></button>';

这很可怕，但是将嵌入在 HTML 中的 JS 中嵌入的数据字符串混合在一起也是如此。通常使用 DOM 方法会更好。

Answer 2

看起来错误出现在"render": function(data){ 部分。该函数已关闭，但封闭的哈希未关闭。

{   "data": null, 
    "width": "10%",
    "render": function(data){
        icon2 = '<center><button type="button" class="btn btn-info m-btn m-btn--icon m-btn--icon-only btn-sm" ' +
            'data-toggle="m-tooltip" title="" onclick="sendEmail('+data.email+')" data-placement="top" data-original-title="' + 'Send Email' + ' "> <i class="la la-envelope"></i></button>';
        icon2 += '</center>';

    return icon2; }
}

请注意末尾多余的}。