Ошибка JavaScript-кода JavaScript

Question

Я знаю, что некоторые из причуд вставлять HTML через JavaScript тонкие, но это дает результаты, которые даже не имеют смысла. Я предполагаю, что некоторые из символов двойной кавычки неверно истолковываются, но руководства, которые я прочитал, похоже, не предлагают ничего другого.

Это функция, которая вводит ряд динамически помеченных кнопок в панель начальной загрузки, а затем вводит эту панель в строку на странице. Пока я только создаю 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 генерируемый в эту странную вещь:

«типа» не удаленно правильное место, и я не» t знает, как ему удалось попасть туда в соответствии со строковым форматом. Есть также несколько дополнительных двойных кавычек, но визуальный осмотр не говорит мне, как они туда попали.

EDIT Так, спасаясь предлагаемые двойные кавычки произвел следующее:

Это кажется, как она должна работать, но OnClick не делает, как я бы ожидать. Вероятно, это проблема с регулярным выражением с моим сопоставлением MVC, но, возможно, это все еще JavaScript.

В верхней части страницы HTML вызывается jquery.js, а затем dashboard.js. В верхней части dashboard.js является следующее:

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

И в контроллере для проекта (только один до сих пор), у меня есть:

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

Тем не менее, если я нажимаю любой кнопок, я не получаю никакого сообщенного запроса в соответствии с журналами Tomcat, и я не перенаправляюсь на целевую страницу. Это mvc или скрипт? Также нет ошибок в консоли инструментов dev.

Answer 1

Если вы console.log(panel) в конце вашей функции, становится ясно

изменения этих двух вары

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