Question

I have a table of cells, when a cell is clicked an event is triggered. I want to add cells dynamically so I will call OnClick again on all rows. When I call OnClick for the second time, any cells that have OnClick called twice stop firing any events.

The odd thing is at the event of my OnClick function, if I can “Return;” it works, however it throws an error saying “Return” isn’t defined

function initBox() {
    $(".selectable").on('click', function (event) {

        //if its selected already, unselect it
        if ($(this).hasClass('rowHighlightColor')) {
            $(this).removeClass("rowHighlightColor");
            selectedCellList = null;
        }
        else {
            //unselect previous cell
            if (selectedCellList != null) {
                selectedCellList.removeClass("highlighted");
            }
            selectedCellList = $(this);

            $(this).addClass("rowHighlightColor");
        }
        Return;
    });
}

Answer 1

You are adding multiple event handlers to existing cells. This is one reason why I prefer to use just the plain old .onclick property.

Anyway, to solve this issue you can either only apply the event to the new cells, or add an attribute to them when you do add an event, then check that attribute before adding the event again.