1

I have a few instances of simplemodal on a page, all working fine (great script!).

I now have the header of the page dynamically loading in from another page, for ease of updating purposes (using this scrpit).

the 'Contact' link in the header should load a modal but since it has been dynamically loaded in, the modal is not firing.

a demo of the page in question is here.

the 'Contact' link is on the right in the header. the file that the header is loaded from is here.

I have tried adding the simplemodal javascript (currently at the bottom of the main page html) into the page the header file comes from with no success. there are other javascript actions in the header (the dropdown menus) that are still working fine. The 'Rules' and 'Location' buttons are examples of working modals.

Anyone have any ideas on this?

Apologies for my ineptitude when it comes to Javascript/programming in general

EDIT: in comparison to a page where the link is not dynamically loaded (and so functions correctly), the one difference seems to be the click event is not loaded if this helps. Anyone got any ideas? such a small annoying thing stopping this website going forward!

Community
  • 1
  • 1
mr_dw
  • 13
  • 3

1 Answers1

0

The problem you are facing has to do with event binding on content loaded dynamically.

There are a number of ways to address this issue, but your best option would be to check out the .on() function in jQuery.

Eric Martin
  • 2,841
  • 2
  • 23
  • 23