JQuery not working after function is called

Question

I've run into a Javascript/JQuery issue I was hoping you'd know how to solve.

Suppose I define this function that builds a table inside of the 'div' with 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;
}

I call this function when the document is ready, and tell JQuery to rebuild the table when any cells are clicked.

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

Once a cell is clicked and MakeTable() rebuilds the table, the JQuery no longer works for the new cells.

Is there any way to fix this issue without using a loop?

*The above is a bread and butter version of a program that actually has a purpose, and I recognize it's useless as presented. Yet, the solution applies across the board.

delegation is needed since you are rewriting the table cells — Huangism, Jan 30 '14 at 20:59

score 3 · Accepted Answer · answered Jan 30 '14 at 20:59

Yes, there is! You just need to use an event binding technique that will work for all elements now and in the future (since you are destroying and recreating the table and its children), using what is called event delegation. Here's how to hook it up with jQuery (using on()):

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

This delegates the click event within the TableHolder element to all current and future tds.

Solved the issue, thanks again! – user3225395 Jan 30 '14 at 21:37 — user3225395, Jan 30 '14 at 21:37

score 0 · Answer 2 · answered Jan 30 '14 at 20:59

The problem is because after rebuilding the table element in the MakeTable function, the td the click event is bound to doesn't exist any more.

You need to use a delegated event handler. Try this:

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

Also, you're using an odd mix of native JS and jQuery. Try this:

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);
}

Thanks for the suggestions, they work like a charm – user3225395 Jan 30 '14 at 21:49 — user3225395, Jan 30 '14 at 21:49

JQuery not working after function is called

2 Answers2