随机引号插入生成的onclick html参数

Question

我正在尝试通过javascript生成HTML时为onclick函数添加参数。当我检查代码时，它在onclick函数的参数中加上引号。

     var lengthOfCats = ArrayOfCategories.length;
     for (var a = 0; a < lengthOfCats; a++) {
     $("#CatTable").append("<div class='better-table-cell'>" + ArrayOfCategories[a].Name + "</div>\
                           <div class='better-table-cell'>" + ArrayOfCategories[a].DepartmentName + "</div>\
                           <div class='better-table-cell'>" + ArrayOfCategories[a].Active + "</div>\
                           <div class='better-table-cell'>\
                                <button onclick=OpenUpdateCat(" + ArrayOfCategories[a].CategoryID + "," + ArrayOfCategories[a].Name + ");" + ">Edit</button>\
                           </div>");

以下是为编辑按钮生成的HTML图像。

Answer 1

浏览器正在规范HTML并在属性值周围加上引号。

问题在于，因为属性值包含空格，并且您没有自己将引号放在正确的位置，所以属性值在JavaScript的中间结束。

然后将JS的下一部分视为新属性。

将字符串混合在一起生成HTML从根本上说是一个坏主意。确保引用和转移所有正确的事情很难。

使用DOM来生成HTML。

从长远来看，它会更长一些，但更清晰，更容易维护。

var $cat_table = $("#CatTable");
var lengthOfCats = ArrayOfCategories.length;
for (var a = 0; a < lengthOfCats; a++) {
    $cat_table.append(
        $("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].Name)
    );
    $cat_table.append(
        $("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].DepartmentName)
    );
    $cat_table.append(
        $("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].Active)
    );
    $cat_table.append(
        $("<div />").addClass("better-table-cell").append(
            $("<button />").text("Edit").on("click", generate_edit_handler(ArrayOfCategories[a].CategoryID, ArrayOfCategories[a].Name))
        )
    );
}

function generate_edit_handler(cat_id, name) {
    return function () {
        OpenUpdateCat(cat_id, name);
    };
}