调用函数后 JQuery 不工作

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 9 年前。

我遇到了 Javascript/JQuery 问题，希望您知道如何解决。

假设我定义这个函数，在“div”内部构建一个 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

是的，有!您只需要使用一种事件绑定(bind)技术，该技术将适用于现在和将来的所有元素(因为您正在销毁并重新创建表及其子项)，使用所谓的事件委托(delegate)。以下是如何将其与 jQuery 连接起来(使用 on() ):

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

这会将 TableHolder 元素中的点击事件委托(delegate)给所有当前和 future 的 td。