javascript - 在动态创建的 html 中嵌入 javascript 对象

Question

我有一个接收项目数组的 js 函数。该函数本身使用对 jquery html 函数的调用来动态创建 html 内容。问题是我不记得如何在附加的 html 中正确嵌入数组。例如，

var ErrorsNotifier = {
   init: function(items) {
        var template = '<div id="message">'; 
        template += '<div id="id">some message.<br /><br />'; 
        template += '<div class="errorsList">error desc</div></div>'; 
        template += '<a href="#" class="goback" onclick="ErrorsNotifier.Back("+items+");"></a>'; 
        template += '<a href="#" class="proceed" onclick="ErrorsNotifier.Next();"></a>'; 
        template += '<input type="image" src="someimage" alt="" class="" onclick="window.open("someurl");"/></div>'; 
        $("#content").html(template);
   }
}

html会渲染到body之后，点击anchor标签返回如下错误——Uncaught SyntaxError: Unexpected identifier

检查浏览器中的锚标记将显示以下内容

a href="#" class="goback" onclick="ErrorsNotifier.Back([object Object]);"

Answer 1

尝试

var ErrorsNotifier = {
   init: function(items) {
       ...
       var $template = $(template);
       $template.find('a.goback').on('click', function(){ErrorsNotifier.Back(items);});
       $("#content").empty().append($template);
   }
}

注意我曾经.on()附加事件处理程序。

Answer 2

var ErrorsNotifier = {
 init: function(items) {
    var template = '<a href="#" class="goback" onclick="ErrorsNotifier.Back(\''+items+'\');">Link</a>';
    $("#content").html(template);
   },
 Back: function(x){ alert(x); }
};

检查这个