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

标签 javascript jquery

我有一个 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 渲染到正文后,单击 anchor 标记会返回以下错误 - Uncaught SyntaxError: Unexpectedidentifier

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

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

最佳答案

尝试

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

请注意,我使用了 .on() 来附加事件处理程序。

关于javascript - 在动态创建的 html 中嵌入 javascript 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13573439/

相关文章:

javascript - 移动设备的 Bootstrap 导航切换

javascript - 在加载和单击时检查下拉列表的值

javascript - 带有 youtube iframe 的 Angular ng-swipe

javascript - 如何最好和快速地隐藏 JavaScript 不需要的选项

javascript - 元素偏移量始终为 0

javascript - 使下拉菜单消失

javascript - 使用 jQuery 实现书签/标志

jquery - 删除 mmenu 中最后一项的底部边框?

javascript - 生成带有子数组的数组

javascript - 尝试访问对象时在非对象上调用未捕获的 TypeError : Object. 键