title: Click Function for Dynamic Content from JSON Array
body: <p>I have a PHP file that serves up a JSON array populated from a MySQL database and is loaded into the DOM. This data is loaded via jQuery getJSON() method into the #navContent divide of the HTML document. This functions as planed.</p>
  
  <p>At the very-bottom of the HTML doc, I have a click function that targets the #navItem div that was dynamically loaded into the DOM but this does not fire. I am assuming the <code>&lt;li ID = 'navItem'...</code> isnt kept when the data is dynamically populated..??</p>
  
  <p>What do I have wrong? For now, I just want all the divides that were dynamically created into the #navContent div to click thru to a URL.</p>
  
  <pre><code>&lt;html&gt;
  . . .
  &lt;head&gt;
  . . .
  &lt;script type="text/javascript"&gt;
  
      var ajaxLoader = '';
      var container = "navItem";
      var appendE = "navContent";
      var dns = 'http://192.168.1.34';
      var navContent = '/andaero/php/regulatory_list.php';
      var bodyContent = '/wiki/index.php/Airworthiness_Directive #content';
  
      &lt;!-- ================ When Ready Do This ============================ --&gt;
      &lt;!-- **************************************************************** --&gt; 
      $(document).ready(function(){
            loadNav(dns + navContent, container, appendE);//&lt;- This gets loaded into the navContent&lt;div
            loadPage(dns + bodyContent, "bodyContent");
  
       });
     . . .
  &lt;/script&gt;
  &lt;body&gt;
      . . .
  &lt;div id="navScrollContainer" class="navContentPosition"&gt;
                  &lt;div id="navContent" &gt;
                      &lt;li id="navItem" style="display: none;"&gt;
                          &lt;h1 class="navH1"&gt;&lt;/h1&gt;
                          &lt;h2 class="navH2"&gt;&lt;/h2&gt;
                          &lt;p class="navP"&gt;&lt;/p&gt;
                          &lt;hr class="navHR" /&gt;
                      &lt;/li&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  . . .
  &lt;/body&gt;
  
  &lt;!-- ================ Functions ===================================== --&gt;
  &lt;!-- **************************************************************** --&gt;
  
  &lt;script type="text/javascript"&gt;
  
      /* --------------- Handle Pg Loading ----------------- */
      function loadPage(url, pageName) {
          $("#" + pageName).load(url, function(response){
      //          transition("#" + pageName, "fade", false);
          });
      };
  
      function loadNav(url, container, appendE) {
          $.getJSON(url, function(data){
  
              $.each(data.items, function(){
  
                  var newItem = $('#' + container).clone();
  
                  // Now fill in the fields with the data
                  newItem.find("h1").text(this.label);
                  newItem.find("h2").text(this.title);
                  newItem.find("p").text(this.description);
  
                  // And add the new list item to the page
                  newItem.children().appendTo('#' + appendE)
              });
  
              $('#navHeaderTitle').text(data.key);
              //transition("#" + pageName, "show");
          });
  
          $('#navItem').click(function(e){ //&lt;-- THIS IS BROKE!! HELP!!
              e.preventDefault();
              $('#bodyContent').load('www.google.com');
          });
      };
  &lt;/scrip&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>============ EDIT ================</strong></p>
  
  <p>I tried everything that was sugested with no prevail. I ended up using the code Shyju answered with but one modification to get it to work: As per the docs, </p>
  
  <blockquote>
    <p>.on( events [, selector] [, data], handler(eventObject) ), I changed [,data] from the tag ID to just the tag type. ie: <em>a</em>. This function now since I wrapped the whole <li> with the  tag.  See bellow:</p>
  </blockquote>
  
  <p>Changed HTML to:</p>
  
  <pre><code>&lt;div id="navScrollContainer" class="navContentPosition"&gt;
      &lt;div id="navContent" &gt;
          &lt;li id="navItem" style="display: none;"&gt;
              &lt;a&gt; //&lt;-- ADDED THIS TAG WRAPPER!!
              &lt;h1 class="navH1"&gt;&lt;/h1&gt;
              &lt;h2 class="navH2"&gt;&lt;/h2&gt;
              &lt;p class="navP"&gt;&lt;/p&gt;
              &lt;hr class="navHR" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <p>Changed the Function to (Note that .on() allows a click event on any TAG element--even new ones--since the event is handled by the ever-present previous element after it bubbles to there.:</p>
  
  <pre><code>$('#navContent').on('click', 'a', function(e){//&lt;--CHANGED DATA TO 'a'
      e.preventDefault();
      $('#bodyContent').load('http://www.google.com');   
  });
  </code></pre>