javascript - Calling OnClick() twice causes OnClick to not work - Stack Overflow

admin管理员组

文章数量:1025202

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

Share Improve this question Follow edited Jun 13, 2012 at 13:41 Christoph 51.3k2121 gold badges101101 silver badges128128 bronze badges asked Jun 13, 2012 at 13:25 JamesJames 3,00988 gold badges4242 silver badges5656 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.

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

Share Improve this question Follow edited Jun 13, 2012 at 13:41 Christoph 51.3k2121 gold badges101101 silver badges128128 bronze badges asked Jun 13, 2012 at 13:25 JamesJames 3,00988 gold badges4242 silver badges5656 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.

本文标签： javascriptCalling OnClick() twice causes OnClick to not workStack Overflow