Question

我有javascript片段迭代json对象，片段如下所示：

var msgTree = "";
    $.each(canMessage, function (key, value) {
        var i=0;
        $.each(value, function (k, v) {

            //console.log(k);
            msgTree += '<li class="has-children"><input type="checkbox" name="cat-'+i+'" id="cat-'+i+'"><label for="cat-'+i+'">'+k+'</label><ul>';

            i++;
            var j=0;
            // console.log(msgTree);
            $.each(v, function (r, p) {
                    // console.log(r);
                    msgTree += '<li> <a href="#0" id="msg-'+i+'0'+j+'" onclick="postMessageToCustomer('+p+')">'+r+'</a></li>';
                    j++;
            });
            msgTree += '</ul></li>';
        });
    });
    // console.log(msgTree);
    $('#canned-msg-tree').html(msgTree);

现在每当执行onclick事件时，我在控制台中都会收到一条错误：

参数列表
之后的
Uncaught SyntaxError：missing）

并告诉我实际调用的函数：

postMessageToCustomer(I am sorry to hear that. Let me help you with the service request to make a device swop.)

是否有人可以帮助我理解如何在上面的代码中将其作为字符串读取？

Answer 1

您的click事件正在将字符串直接传递给函数。您需要将其封装在引号中。

msgTree += '<li> <a href="#0" id="msg-'+i+'0'+j+'" onclick="postMessageToCustomer(\''+p+'\')">'+r+'</a></li>';

您也可以在不依赖文本onclick属性的情况下执行此操作。由于您已经使用了jQuery，因此更加容易。

  var canMessage = {
     "Test": {
         "Line One": {
             "Sub Item": "My Message"
         }
     }
 };
var msgTree = $("#canned-msg-tree");
$.each(canMessage, function (key, value) {
    var i=0;
    $.each(value, function (k, v) {
        var item = $('<li class="has-children"><input type="checkbox" name="cat-'+i+'" id="cat-'+i+'"><label for="cat-'+i+'">'+k+'</label></li>');

        var subList = $("<ul>");
        var j=0;
        $.each(v, function (r, p) {
            var subItem = $('<li> <a href="#0" id="msg-'+i+'0'+j+'">'+r+'</a></li>');

            subItem.click(function (){
                postMessageToCustomer(p);
            });

            subList.append(subItem);
            j++;
        });
        item.append(subList);
        msgTree.append(item);
        i++;
    });
});

Answer 2

不要这样做，使用众多框架之一来构建你的html并附加监听器。否则，你将不得不实现框架已经完成的所有特殊情况。在你的情况下，你需要告诉解释器它是一个字符串，通过在上面加上引号，并且由于字符串是未经过数据处理的数据，你还必须将它作为html属性转义，这样如果它包含双引号，那么你就是使用as属性delemeter或字符串分隔符的单引号，它将给出一个错误。相反，使用框架更简单，更健壮。您选择的几乎任何框架都将为您提供此功能。

Javascript onclick函数调用提示在将字符串作为参数

2 个答案: