jQuery .on not working with dynamic DOM/HTML

Question

I\'m not exactly sure if this is due to my manifest setup, or if there\'s something going on with the .on event and pages that generate content/modify content on th

Answer 1

I am not sure of the exact context here-- it sounds like an inability to jump IFRAME boundaries due to alien domain security.

I would try a timer that tries to gather anything within your target (the gmail doc part of the DOM), if you can do that, you can workaround the inability of jQ live by rolling your own monitor (store the bound links in an array).

Answer 2

$('a[href^="http:.......').on('click', function() { ...

Will only work with anchors that are already present when the page is rendered—not dynamically added anchors. The above is exactly identical to

$('a[href^="http:.......').bind('click', function() { ...

---

Here's how you use on with dynamically added content:

$(document).on("click", 'a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]', function() ...

This creates a delegated event. All clicks that happen in descendants of your document (which is everything) will be inspected to see if the source of the click matches your selector. If it does, your event will fire. That's why it works with dynamically added content.

Ideally, if you can guarantee that all of these anchors will be inside of some container, say, a div with id foo, the follow would be more efficient:

$('#foo').on("click", 'a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]', function() ...