JQuery不工作後函數被調用

Question

我遇到了一個Javascript/JQuery的問題，我希望你會知道如何解決。

假設我定義這個函數，構建ID爲「格」內表「TableHolder」：

MakeTable = function() 
{ 
    document.getElementById('TableHolder').innerHTML = ""; 
    var tablebuild = "<table><tbody><tr>"; 
    for (i=0; i<3; i++) 
    { 
     tablebuild += "<td></td>"; 
    } 
    tablebuild += "</tr></tbody></table>"; 
    document.getElementById('TableHolder').innerHTML = tablebuild; 
} 

我調用此函數文檔時準備好了，並告訴jQuery來重建表時點擊任何單元格。

$(document).ready(function() { 
    MakeTable(); 
    $('td').click(function(){ 
     MakeTable(); 
    } 
}); 

一旦單元格被點擊並且MakeTable（）重建表格，JQuery將不再適用於新的單元格。

有什麼辦法可以解決這個問題而不使用循環？

*上面是一個程序的麪包和黃油版本，實際上有一個目的，我承認它是無用的。然而，該解決方案全面適用。

Answer 1

是的，有！您只需要使用事件綁定技術，該技術將適用於現在和將來的所有元素（因爲您正在銷燬並重新創建表及其子項），並使用所謂的事件委派。以下是如何使用jQuery（使用on()）把它掛：

$(document).ready(function() { 
    MakeTable(); 
    $('#TableHolder').on('click', 'td', function() { 
     MakeTable(); 
    }); 
}); 

這代表了TableHolder元素中的單擊事件到所有當前和未來td秒。

Answer 2

問題是因爲在MakeTable函數中重建table元素之後，td,click事件被綁定到不再存在。

您需要使用委託事件處理程序。試試這個：

MakeTable(); 
$('#TableHolder').on('click', 'td', function(){ 
    MakeTable(); 
} 

另外，你正在使用本地JS和jQuery的奇怪組合。試試這個：

var MakeTable = function() { 
    var $tableHolder = $('#TableHolder').empty(); 
    var tablebuild = "<table><tbody><tr>"; 
    for (i=0; i<3; i++) 
    { 
     tablebuild += "<td></td>"; 
    } 
    tablebuild += "</tr></tbody></table>"; 
    $tableHolder.html(tablebuild); 
}