Question

I have a little problem with an AJAX function:

1. PAGE A stands for the page.
2. PAGE X stands for the loaded content.
3. RES A stands for the page results.
4. 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 (1×5 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!

Answer 1

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