Javascript inside AJAX request

Question

I have a little problem with an AJAX function:

PAGE A stands for the page.
PAGE X stands for the loaded content.
RES A stands for the page results.
RES B stands for some AJAX loaded content => new results.

PAGE A contains 20 results, each result can be removed and a new result is loaded via AJAX (PAGE X).

Example:

User is on PAGE A: --> PAGE A loads js "click" functions. --> Results are RES A (20x).

When the user removes a result from RES A (1x), AJAX loads a new result RES B (1x):

User is -still- on PAGE A. --> PAGE X is loaded with js "click" functions. --> Result is RES B (1x)

In order to add click functions to RES B, I have to reload a lighter JS but it multiplies the functions of RES A.

So when the user removes results from RES A (1x5 for 5 results removed), RES B result is multiplied 5x (the user gets 5x the same result instead of 1x).

Do you get it? In brief, the AJAX request is multiplied by x RES B instead of sticking to 1 request. Do you have any clue how I can keep my RES B 1x?

Thanks!

score 2 · Accepted Answer · answered Jul 18 '11 at 09:26

I think you re-binding click event every time while "reload a lighter JS". Javascript doesn't replace the event function - they are just concatenated. If you use jQuery use live to add click event. If you don't - clear current click events before reloading

score 1 · Answer 2 · answered Jul 18 '11 at 09:25

1

Seems that events are being attached multiple times.
Use unbind().click() or unbind().bind('click'), or die().live() whatever are you using

answered Jul 18 '11 at 09:25

corbacho

8,762
1
26
23

Awesome, live() just globalize the functions ^^ Thanks! – kfa Jul 18 '11 at 09:34
Thanks are given with a +1 in stackoverflow ^^ – corbacho Jul 18 '11 at 09:39
oh yeah, u don't have still enough points. doesn't matter, glad your problem is solved – corbacho Jul 18 '11 at 09:41

score 1 · Answer 3 · answered Jul 18 '11 at 09:32

Your explanation is really difficult to understand, but if I understood correctly your problem lies in the fact that you bind the same element multiple times.

The best solution in your case would be the use of jQuery .delegate('#datatable a', 'click', function(e){ /* DO STUFF */}) which allows to bind all the selector matching elements once (in this case for example if you had a table with id=datatable, every link that is inside of it will always be bound to that handler, even if you add more html to the table, or remove some) and you wouldn't have to worry about it later on.

However, if you don't use jQuery the only solution is to either unbind the events before you add them (to remove the already existing binds) and then bind them again.

Lol I know :( I use jQuery and the **live** function just fixed it. — kfa, Jul 18 '11 at 09:38
delegate beats live in terms of performance, especially if you have bigger tables, it's much more efficient to bind the parent element and figure out what was clicked in code than to bind every single cell etc. — zatatatata, Jul 18 '11 at 09:44

score 0 · Answer 4 · answered Jul 18 '11 at 09:29

What you need to do is process the result (1x) when you load it. A simple way can be to have a class added to the results when u load and removing it once u r done.

e.g.

$('.newresult .clickbutton').ready(function(){
   // Do something
});

$('.newresult').removeClass('newresult');

Javascript inside AJAX request

4 Answers4