Question

I have a button on my page which adds row by row on each click.
I use this code:

$('#addCnt').live('click', function () { .. };

Problem is when I reload the part of the page together with that code, it registers the handler again, so when button is clicked after that it appends N number of rows, where N = number of total page reload.

How can I prevent that?

Answer 1

Within a given page, you need to make sure that your code to attach the event handler is never run more than once. So this code:

$('#addCnt').live('click', function () { .. };

should not be run multiple times.

If you can’t restructure your code to prevent this from being run more than once, then you can create your own global flag to protect it:

if (typeof window.addCntProtection == "undefined")  {
    window.addCntProtection = false;
}
if (!window.addCntProtection) {
    $('#addCnt').live('click', function () { .. };
    window.addCntProtection = true;
}

Incidentally, jQuery has deprecated the use of .live() and it is no longer recommended for any version of jQuery. They recommend you use .on() for jQuery 1.7+ or .delegate() for earlier versions of jQuery.