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

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

• javascript
• jquery
• html

• Please read description before you downvote, I know Return is not defined. I am saying it's weird that it makes it work – James Commented Jun 13, 2012 at 13:31
• 1 Have you made any progress with your problem? Add a console.log to your function, I'm pretty sure it gets called twice, thus nullifying the "addClass" effect, making you think it doesn't work. – Christoph Commented Jun 13, 2012 at 18:28

2 Answers 2

it needs to be return instead of Return (capital R)

however, writing return; returns undefined so you can just omit it.

edit:

you attach the event twice, make sure only to attach it once, else it causes (as you noticed) undesired behaviour like attaching class and immediately removing it again.

The reason why it works with "Return" is that the function is only run once because it throws an error when reaching it.

Use jQuerys .live() (or .on() for newer versions, as live is deprecated there) to automatically attach the click event to every new row you add. jQuery live Docs

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.