Search code examples
javascriptajaxloadrequestunobtrusive

Javascript inside AJAX request

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 (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!

Solution

  • 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