Using event handler on dynamic websites


By default your changes are cleared when the page reload. You get a "clean slate" for your code every time the visitor navigates. On dynamic websites a reload of the page is never done because new content is fetched dynamically. This can cause issues if you do changes on elements that do not refresh (header, footer, added attributes on body, etc.).

This can cause;

  • Duplications of your added functions
  • Duplications of your added elements
  • Added elements and attributes that still exist after navigation
  • Intervals and timeouts that keep running after navigation (if they haven't be cleared)

You will, in other words, have to handle this manually. Below we will show examples of how to do this.


Make sure you've added the keyword /* sg_no_proxy */ first in your code. See further information.


Adding an event handler

Because the page is never reloaded your event handlers are never cleared / removed. This will cause them to be set over and over again when Audience (re-)eveluates to true and your code is run (on new content load / navigation).

To prevent this you need to first remove your event handler before setting it. 

// remove event handler
$("body").off("click", ".sg-product-information-tab");

// add event handler
$("body").on("click", ".sg-product-information-tab", function(){
   // code for click event


Was this article helpful?
0 out of 0 found this helpful