Javascript построить динамическую строку

Question

Мне нужно построить динамическую строку для каждого из данных.Эта строка установит кнопку HTML, когда событие click вызовет функцию.У меня проблемы с «е».См. Пример ниже:

var stringButton = ""; 
var txtBtn = "My Button";
for(item in data){
     stringButton= "<input id='btn-" + item.id + "' type='button' href='#'
class='fbbutton'" + "value=' " + txtBtn + "' onclick='actionBtn(" + item .id + ", '" + 
item .name + "')'>";
}

function actionBtn(id, name) {
//process data.
}

В элементе inspect я вижу:

<input id="btn-1599" type="button" href="#" class="fbbutton" value=" My Button " 
onclick="actionBtn(1599, " itemName"" jjjj')'=""> 

Проблема заключается в создании строки, которая вызывает методы, передающие строки параметров.Как мы видим, «и» неправильны. Каков правильный путь?

Answer 1

Правильный способ IMO - использовать методы создания DOM и правильно связывать обработчик событий вместо использования встроенных обработчиков событий.

var button = document.createElement('input');
button.id = item.id;
button.type = "button";
button.className = "fbbutton";
button.value = txtBtn;
button.onclick = (function(item) {
    return function() {
        actionBtn(item.id, item.name);
    };
}(item));

Answer 2

DOM Инспекторы показывают вам DOM после того, как он был обработан синтаксическим анализатором. Это НЕ показывает вам первоисточник. Такие вещи, как «какие цитаты использовались», «в каком порядке были атрибуты», «сколько пробелов было между атрибутами», не сохраняются.

Здесь вы видите, что все атрибуты заключены в двойные кавычки, но они также содержат двойные кавычки. Но вы также заметите, что те, которые находятся внутри значения, имеют цветовую кодировку как часть строки (обычно синим цветом).

Тем не менее, в вашем источнике вы используете одинарные кавычки вокруг значения атрибута и одинарные кавычки внутри него. Подумайте об использовании двойных кавычек вместо одного или другого (экранированный как \" здесь) или " сущности.

Наконец, добро пожаловать в переполнение стека. Пожалуйста, примите ответы на предыдущие вопросы, прежде чем задавать новые.

Answer 3

Либо делайте так, как в ответе Феликса Клингса, либо, если вы будете делать это много, используйте шаблоны javascript / микро-шаблоны.

https://developer.mozilla.org/en/JavaScript_templates

Answer 4

В вашем item.name наверняка есть 'или', поэтому он обрезает строку, которую вы строите.

Попробуйте убежать от них