2014-12-07 70 views
0

我需要在jQuery的動態添加一行添加屬性,這是我的代碼:故障試圖與jQuery

var row = $('<tr />') 
    .append($('<td />')) 
    .append($('<td>' + response.nome + '</td>')) 
    .append($('<td />', { 
     style: "text-align:center" 
    }).append($('<input />', { 
     type: 'image', 
     src: 'nienteico.png', 
     'class': 'ajaxEdit', 
     id: '1.' + response.row_id 
    }).css({ 
     cursor: 'pointer', 
     width: '40px', 
     height: '40px', 
    }).click(function() { 
     cambiastato('1.' + response.row_id); 
    }))); 

特別,至於最後一個元素,我期待得到「id」屬性和一個'onclick函數'。喜歡的東西:(!錯過了id屬性和的onclick功能)

<tr> 
<td></td> 
<td>uytredsgfh</td> 
<td style="text-align:center"> 
<input type="image" src="nienteico.png" style="cursor:pointer; width:40px; height:40px" id="1.15" class="ajaxEdit" onclick="cambiastato(1.15)"> 
</td> 
</tr> 

前兩個元件被正確地寫入,但unfortunally這是我得到的最後一個

<td style="text-align:center"> 
<input type="image" src="nienteico.png" class="ajaxEdit" style="cursor: pointer; width: 40px; height: 40px;"> 
</td> 

任何幫助或建議?謝謝

回答

1

這是你所期望的。

您的id無效,因爲它以數字開頭 - 請參閱w3.org。 jQuery可能因此拒絕它。

單擊事件不會寫爲標記的屬性。相反,它被作爲標籤所代表的DOM元素的屬性。如果您將input放在頁面上並點擊它,您可能會發現它起作用。

如果你想明確地輸出onclick和其他屬性到標籤,你可以將它們設置在最初的標籤創建調用:

var row = $('<tr />') 
    .append($('<td />')) 
    .append($('<td>' + response.nome + '</td>')) 
    .append($('<td style="text-align:center" />') 
     .append($('<input onclick="cambiastato(1.' + response.row_id + ');" type="image" src="nienteico.png" class="ajaxEdit" id="1.' + response.row_id + '" />') 
     .css({ 
      cursor: 'pointer', 
      width: '40px', 
      height: '40px', 
     }) 
    )); 
1

您的代碼是正確的。 jQuery並沒有向它向DOM添加Event Listener的元素添加屬性。換句話說,即使它在工作,它也不會出現在標記中。嘗試向偵聽器添加console.log語句並嘗試使用 - 它應該可以工作。

在附註中,有幾個最佳實踐可能有助於保持代碼更清潔和更易於維護。

  1. 在JavaScript中使用jQuery元素時,人們通常使用$作爲變量名稱的前綴。在你的例子中,這將是$row
  2. 由於您正在編寫嵌套元素,因此通常會爲每個主要元素創建一個變量並在最後將它們結合在一起,這樣會更清晰。這樣可以減少重構時的表面面積。在你的例子中,我可能會將$input元素放入它自己的變量中。
  3. 內聯樣式和特別是用JavaScript編寫的樣式被認爲是不好的做法。如果可能的話,你應該嘗試添加一個類,然後在樣式表中設置類的樣式。

祝你好運!