title: jQuery .on not working with dynamic DOM/HTML
body: <p>I'm not <em>exactly</em> 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 the fly, but I've run into a stumbling block.</p>
  
  <p>Here's the basic idea: I want to be able to catch a click on any link with a URL that matches a pattern regardless of where the user is/what page they're looking at (and do other stuff instead of navigating to the link). The problem I'm running into is that my listener won't work on any page that modifies its content after content loads (jQuery's <code>$(document).ready</code>) (e.g. gMail). I'm injecting my javascript all over the place and it's still not quite working.</p>
  
  <p>Here's the listener code (in main.js):</p>
  
  <pre><code>$('a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]').on('click', function(event) 
  {
    event.preventDefault();
    SKDMmain(this);
  });
  </code></pre>
  
  <p>Here's the code in my background.html: (injects my script when the page loads as well as when the tab/window is changed to, so it <em>should</em> be there. <strong>Note</strong>: jQuery is included above, along with all of the local .js files I need)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready( function(){
      chrome.tabs.executeScript(null,{file:"main.js"});
    });
    chrome.tabs.onActiveChanged.addListener( function(tabID,somethingElse){
        chrome.tabs.executeScript(tabID,{file:"main.js"});
    });   
  
    chrome.windows.onFocusChanged.addListener( function(windowID){
      if ( windowId != chrome.windows.WINDOW_ID_NONE ) {
        chrome.tabs.executeScript(null,{file:"main.js"}); 
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>But in pages like gMail or <a href="http://www.google.com/googlecalendar/event_publisher_guide.html#toc-individual" rel="nofollow noreferrer">this</a>, the listener doesn't catch the event. I originally had this as a content script, but I recently moved it to using background and programmatically injecting, but neither seem to be working quite right.</p>
  
  <p>Here's my manifest, for reference:</p>
  
  <pre><code>{
  "name": "SkedjoolMi",
  "version": "0.5",
  "description": "Automated Google Calendar event scheduling",
  "background_page": "background.html",
  "permissions": [
    "tabs","http://*/","https://*/"
  ],
  "content_scripts": [
    {
      "matches": ["&lt;all_urls&gt;"],
      "js": ["jquery-1-7-1.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
  }
  </code></pre>