Question

我在页面内动态创建html元素我在这个动态元素上绑定事件，比如

$('#fields').on('input', '.myClass', function (e) {

});

并且在js代码中我注入了类似的元素（这适用于硬编码的css类）

'<tr><td><input id='+myObj.id + ' class="form-control myClass" type="text" value='+myObj.Value +' name="somename"></td></tr>'

但是当我用变量中的css类名更改代码时，它不起作用

var cssClass= "form-control myClass";
'<tr><td><input id='+myObj.id + ' class='+cssClass +'type="text" value='+myObj.Value +' name="somename"></td></tr>'

Answer 1

class="form-control myClass"

在原始代码中，该属性有引号

class='+cssClass +'type="text"

在新代码中，引号不再是字符串的一部分。

由于字符串变量的值包含 spaces ，因此不会将其视为单个属性值。不要忘记你的报价。

将字符串拼凑在一起形成HTML容易出错且难以调试。不要这样做。

使用DOM或jQuery构建数据结构可以实现更详细，但更易读的代码。作为奖励，您无需担心特殊字符（如空格&或"），因为它们会自动正确编码。

var myObj = { Value: 123 };
var row = $("<tr />").append(
    $("<td />").append(
        $("<input />")
            .attr("id", myObj.id)
            .addClass("form-control")
            .addClass("myClass")
            .attr("type", "text")
            .val(myObj.Value)
            .attr("name", "somename")
    )
);
console.log(row[0]);

分配的css类在从变量分配时不起作用

1 个答案: