住每個jquery？

Question

<table style="width: 50%" id="myTable"> 
<tbody> 
<tr><td>Row 1</td><td>dd</td><td>red</td><td>dd</td></tr> 
<tr><td>Row 2</td><td>dd</td><td>green</td><td>dd</td></tr> 
<tr><td>Row 3</td><td>dd</td><td>red</td><td>dd</td></tr> 
</tbody> 
</table> 
<a href="#" name="addRow">Add Row</a> 

$(document).ready(function() {   
     $("a[name=addRow]").click(function() { 
       $("table#myTable tr:last").after('<tr><td>Row 4</td><td>dd</td><td>red</td><td>dd</td></tr>'); 
       return false; 
     }); 

    $('#myTable tbody tr td').each(function() 
{ 
    if ($(this).text() == 'red') 
    { 
     $(this).parent().css('background-color', 'red'); 
    } 
    else if ($(this).text() == 'green') 
    { 
     $(this).parent().css('background-color', 'green'); 
    } 
}); 

}); 

爲什麼如果我添加新行然後這不工作？我嘗試添加直播：

$('#myTable tbody tr td').live('each', function() 

但是這也並不工作

LIVE：http://jsfiddle.net/pytP2/

Answer 1

這工作：

$(document).ready(function() {   

$("a[name=addRow]").click(function() { 
    $("table#myTable tr:last").after('<tr><td>Row 4</td><td>dd</td><td>red</td><td>dd</td></tr>'); 
    initRow($("table#myTable tr:last")); 
    return false; 
}); 

$('#myTable tbody tr').each(function() 
{ 
    initRow($(this)); 
}); 

function initRow(row) 
{ 
    row.find('td').each(function(){ 
     var self = $(this); 
     var textInTD = $.trim(self.text()); 
     if (textInTD == 'red') 
     { 
      row.css('background-color', 'red'); 
      return false; 
     } 
     else if (textInTD == 'green') 
     { 
      row.css('background-color', 'green'); 
      return false; 
     } 
    }) 
} 
}); 

如果你需要，我可以爲代碼添加註釋。

Answer 2

live需要一個事件類型（如'click'）作爲第一個參數。見http://api.jquery.com/live/

Answer 3

這不起作用，因爲在onload代碼僅觸發一次：負載...

如果你想添加一個新行後要執行的代碼，提取有用的代碼放到一個新功能並在添加新行後調用它，如果您擔心性能（如果表格可能變得很大），則也可以將新行傳遞給該函數。

Answer 4

live將爲指定元素的所有現有和未來實例附加處理程序，這與您嘗試執行的操作不同，因爲您需要更新添加到表中的新元素的樣式。 live只會在您向表格中的每個新行添加「單擊」事件時使用。

要解決你的代碼需要調用款式更新功能添加的每個新元素後，這裏有一個工作演示 - http://jsfiddle.net/ipr101/zDvAQ/1/