HTML在JS - 呈現不正確行情

Question

getFeederInfoWindow: function (i) { 
    var windowContent = "<button onclick='feeders.getFeederLoadingData(" + i + ",'summer')\">Summer</button>" 
} 

方法簽名基本上是：feeders.getFeederLoadingData: function (i, selectedSeason)

當HTML頁面被加載時，Chrome檢查顯示了<button>呈現如下：

渲染： <button onclick="feeders.getFeederLoadingData(203," summer')">Summer</button>

但是，這是我想要的東西：

期望<button onclick="feeders.getFeederLoadingData(203,'summer')">Summer</button>

有點尷尬的問題，但我不知道我是怎麼搞砸的報價。

謝謝。

Answer 1

「onclick」後的報價僅爲單引號。這應該做的工作：

getFeederInfoWindow: function (i) { 
    var windowContent = "<button onclick=\"feeders.getFeederLoadingData(" + i + ",'summer')\">Summer</button>"; 
} 

Answer 2

您嘗試啓動與'你的屬性值，然後用"結束。

正確地嵌套你的引號。

更好的是：不要通過將字符串砸在一起來生成HTML。使用createElement,addEventListener和朋友。

Answer 3

你似乎缺少起始報價爲onclick屬性：

"<button onclick='\"feeders.getFeederLoadingData(" + i + ",'summer')\">Summer</button>" 
//    ^
//   THIS WAS MISSING 

在一般情況下，它是從他們的標記語言中分離的DOM元素的行爲是個好主意。這是可以做到：

• Using jQuery：

  $("<button>Summer</button>").on('click', function() { ... }); 
  

• Without using jQuery：

  var button = document.createElement('button'); 
  button.innerHTML = "Summer"; 
  button.onclick = function() { ... }; 
  

Answer 4

您嘗試使用單引號內聯的JavaScript像下面

var windowContent = "<button onclick='feeders.getFeederLoadingData(i,'summer')' >Summer </button>";