title: How can I run a function on page load and then after click?
body: <p>hi this is my very first time using jquery on any project at all. I am needing a little help if someone can </p>
  
  <p>on my page i have some code to load a json file this file contains menu details for the main menu such as </p>
  
  <p>name / action / poster</p>
  
  <p>this is my code </p>
  
  <pre><code>var Items = "";
  var flixAPI = "https://example.com/api.php?action=MAIN";
  
  $.getJSON(flixAPI, function (data) {
  
      $.each(data, function (i, item) {
          Items += "&lt;div class='img'&gt;";
          Items += "&lt;a target='_blank' href='" + item.ACTION + "'&gt;";
          Items += "&lt;img src='"+ item.POSTER +"' alt='" + item.NAME + "'&gt;";
          Items += "&lt;/a&gt;";
          Items += "&lt;div class='desc'&gt;" + item.NAME.substr(0, 16) + "&lt;/div&gt;";
          Items += "&lt;/div&gt;";
      });
  
      $('#content').html(Items);
  
  });
  </code></pre>
  
  <p>i can get this code working when i place it into the document ready.</p>
  
  <p>my issue is after the main menu is populated and added to the page i then need to stop the page redirecting when a href link is clicked and get the value of the href link to then send another get json request to load the next page </p>
  
  <p>i have tried loading the main menu on the document ready and then sticking one call into a .click binding to load the next set of items based on the href link clicked but when i try do this inside or outside the document ready the .click binded function wont work  </p>