Question

我遇到了一个Javascript / JQuery问题我希望你知道如何解决。

假设我定义了这个函数，在id为'TableHolder'的'div'中构建一个表：

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

问题是因为重建table函数中的MakeTable元素后，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);
}

调用函数后JQuery无法正常工作

2 个答案: