title: Using jQuery to select a dynamically created element
body: <p>Trying to figure this one out and I think I know the problem but I don't know how to fix it. When my page first loads I'm using a JSON file to provide some links on the page, using $.getJSON to create them and give them ID's, dynamically. My code for that is (this is just the bit I'm interested in for now, I of course close the function):</p>
  
  <pre><code>    $(function() {
  
          $.getJSON("data.json", function(data) {
              var navOutput = "";
              for (var key in data.navigation) {
                  navOutput += '&lt;li&gt;&lt;a id="' + key + '"&gt;' + data.navigation[key] + '&lt;/a&gt;&lt;/li&gt;'; // Create list items with ID 'key'
              }
              $("#mainNav").html(navOutput);
  </code></pre>
  
  <p>Everything loads fine on the page. Outside of the $.getJSON function I am trying to assign an event listener to one of those dynamically created ID's, as an example:</p>
  
  <pre><code>$("#cast").click(function() {
      alert("Testing");
  }); //click function
  </code></pre>
  
  <p>This doesn't seem to work. There is probably a simple answer to this but I can't figure it out. If I assign an event handler to an ID on the page created in the HTML, it works, so it has something to do with these dynamic ID's. Any help would be appreciated.</p>