從變量分配時，分配的css類不起作用

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" 

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

由於字符串變量的值包含空格 ，因此不會將其視為單個屬性值。 不要忘記你的報價。

---

將字符串拼湊在一起形成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]);