jquery click event executes multiple times in single click

Question

I have a template file which gets dynamically included inside two or more DIV in single page: divs will be AS below : 1. VIEW div 2. EDIT div other can be - RESOLUTION div ...

EDIT div is display none while VIEW div appear and reversal. so, only one can be appear at a time.

template file contains below javascript:

   AJS.$(document).on('click', '#addROW', function()
   {
      console.log('calling');
      ....
      ..
   }

now, when i click on add button (existed in template file) then it executes above event and it should add a single row and print a log message but, it executes doubles so, initially executes two times (as template included in two screens) and prints two times message 'calling' and after some times, it gets double 4 times executes. I expect it should executes one time only and prints 'calling' message once only.

How can i resolve this issue.

It looks like due to javascript is added multiple times.. but how can i control to add it single times into the page or any other way to resolve this issue ?

Thank You

underscore.js has _.debounce(yourFunction) for this issue. There is also a _.once(yourFunction) and a _.throttle(yourFunction). Code is available (MIT-license), usually pretty short: underscorejs.org/#debounce — Paul
– Paul, Commented Aug 20, 2013 at 10:26

JamesN · Accepted Answer · 2013-07-13 06:02:08Z

2

You can check the script is setted or not for assign new event :

AJS.$(document).on('click', '#addROW', function (event) {
    if (event.handled !== true) {
        //put your code here
        event.handled = true;
    }
    return false;
}

answered Jul 13, 2013 at 6:02

JamesN

3871 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Usual Suspect Over a year ago

This would allow only one time to be inserted.When you click the add button next time it won't work.

dsi Over a year ago

thanks. it works every time on both screen. before that followed - AJS.$(document).off('click').on('click', '#finalremove', function(){...} it also works but broke other events calling.

Chandu · Accepted Answer · 2013-07-13 05:55:12Z

1

Try this

AJS.$(document).on('click', '#addROW', function(event)
{
  event.stopPropagation();
  console.log('calling');
  ....
  ..
}

answered Jul 13, 2013 at 5:55

Chandu

1,0423 gold badges18 silver badges36 bronze badges

Collectives™ on Stack Overflow

jquery click event executes multiple times in single click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related