JavaScript HTML 注入(inject)错误

Question

我知道通过 JavaScript 注入(inject) HTML 的一些怪癖很微妙，但这会产生甚至没有意义的结果。我猜某些双引号字符被误解了，但我读过的指南似乎没有建议做任何不同的事情。

此函数将一系列动态标记的按钮注入(inject)引导面板，然后将该面板注入(inject)页面上的一行。到目前为止，我只生产了 10 个按钮，而且我知道我需要解决超过 12 个按钮并制作新面板的问题。目前，按钮创建是问题所在。

function tableMaker(data, tableID) {
var panel = '<div class="col-md-12" style="height: 140px"> \n\t<div class="panel panel-default" style="height: 100%"> \n\t\t<div class="panel-heading">Apps Alive</div> \n\t\t <div class="panel-body">';
var mytable       = '';
var colStart      = '<div class="col-md-1"><center><b>';
var titleEnd      = '</b></center>';
var buttonStart   = '<center><button id="';
var buttonMiddle1 = '-appcheck" type="button" class="btn btn-default btn-circle btn-lg" title="';
var buttonMiddle2 = '" onclick="templateLoader("';
var buttonMiddle3 = '")"';
var buttonEnd     = '-appcheck-icon" class="fa fa-exclamation-circle"></i></button></center>';
var colEnd        = '</div>';
var panelEnd      = '\n</div>';


var i = 0, j = 0, colLimit = 12;
for(; i < data.length;){
    for (var j = 0; j < colLimit && i < data.length; ++j, ++i) {
        /*
         * Template
         * <button id="OPS-appcheck" type="button" class="btn btn-default btn-circle" title="OPS" onclick="templateLoader("OPS")"><i id="OPS-appcheck-icon" class="fa fa-exclamation-circle"></i>
         * </button>
         */
        mytable +=  colStart + data[i][2] + titleEnd + '\n' + buttonStart + data[i][2] + buttonMiddle1 +
                    data[i][2] + buttonMiddle2 + data[i][2] + buttonMiddle3 + '><i id="' + data[i][2] +
                    buttonEnd + colEnd;
    }
}

panel += mytable + panelEnd;

document.getElementById(tableID).innerHTML = panel;
}

对我来说，这看起来是正确的。每个引用和标签都有一个更接近的匹配位置，但浏览器将生成的 HTML 变成了这个奇怪的东西:

“类型”不在正确的位置，我不知道它是如何根据字符串格式到达那里的。还有一些额外的双引号，但目视检查并没有告诉我它们是如何到达那里的。

编辑因此，转义建议的双引号会产生以下结果:

这看起来应该可以工作，但是 onclick 并没有按照我的预期进行。这可能是我的 MVC 映射的正则表达式问题，但也许它仍然是 JavaScript。

在 HTML 页面的顶部，首先调用 jquery.js，然后调用dashboard.js。在dashboard.js的顶部是这样的:

function templateLoader(appTag) {
    $.get('/app/' + appTag);
}

在该项目的 Controller (迄今为止唯一一个)中，我有这个:

@RequestMapping(value = "/app/*", method = RequestMethod.GET)
public ModelAndView generic()
{
    return new ModelAndView("template");
}

但是，如果我单击任何按钮，根据 Tomcat 日志，我不会收到任何报告的请求，并且我不会被重定向到目标页面。是mvc还是脚本？开发工具控制台中也没有错误。

Answer 1

如果你在函数末尾console.log(panel)，它就会变得非常清楚

更改这两个变量

var buttonMiddle2 = '" onclick="templateLoader(\'';
var buttonMiddle3 = '\')"';