.on('click') intermittent after using ajax .load()

JavaScript
1

Hi,

I am loading in some html content to my page on document ready with jQuery’s ajax .load() event. This works as expected. However, after when I try and target a class with an on.(‘click’) event it intermittently fails to trigger the event. I have tested this when not calling the .load() event first and the intermittent failing on.(‘click’) event does not occur.

Could their be an issue where the .load() could cause something like this to occur?

The .load() response always comes back as “success”.

Thanks,
Ronan

2

only those elements that are present when you call .on(‘click’) get the handler attached. every element that comes later (e.g. through AJAX) doesn’t have the handler.

you would use delegated events for that, e.g.

$(common_parent_thats_there_from_the_start).on('click', '.class-to-trigger-the-handler', event_handler);
3

That’s the strange thing though. I don’t target a newly inserted class, i’m targeting a class that is inserted on the original document load. I can see it in the DOM in Firebug but for some reason after using the .load() the .on(‘click’) event doesn’t execute. The problem is intermittent though. It happens only maybe 1/10 times it’s clicked.

4

My site is built on the responsive design Zurb Foundation framework. Im trying to target a href that is used in it’s Tab’s plugin so it could be some sort of conflict their. I dont see how though as the class is in the DOM when i run the on.(‘click’).

5

event listeners don’t target classes either, they target elements (which you may select using classes). if the element (by whichever way you may select it) doesn’t exists at the time the the listener is defined, it won’t have one.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.