title: Trouble with jquery ajax and datatables
body: <p>I am trying to use jquery ajax to get data from a php file. This php file prints a table made from a db query. Once the table is returned to the html page, I wanted to apply datatables styling to the table, but this will not work. </p>
  
  <p>It maybe that I should just use datatables ajax functionality, instead of jquery ajax. I just have three links that a user can click on to call ajax, where not all the links return a printed table. </p>
  
  <p>I suspect it it because of javascript timing, where all the js loads before the table has been output. </p>
  
  <p>I tried using jquery.on(), but could not get it to work with datatables.</p>
  
  <p>I appreciate any help. Sorry if this is confusing. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;     
  $(document).ready(function() {
  
  // EVENT LISTENER FOR CLICKS
  var option_action = "fridge";
  var using = "pantry";
  $.post("./backend.php", { option: option_action, action: using }, function(data) {
  $("#content").html(data);
  load_table();
  });
  // EVENT LISTENER FOR CLICKS
  $(".pantry_menu li").click(function() {
      alert("CLICK");
  //getting data from the html
  var option_action = $( this ).attr("name");
  var using = "pantry";
  $.post("./backend.php", { option: option_action, action: using }, function(data) {      
      $("#content").html(data);
  });
  return false;
  });
  
  //Mouse action listeners for side bar
  $(".pantry_menu li").mouseover(function() {
      $(this).css("border-bottom" , "2px solid black");
  });
  $(".pantry_menu li").mouseout(function() {
      $(this).css("border-bottom" , "2px dotted black");
  });
  $(".fridge_table1").change(function(){
     alert("CHANGE");
  });
  });
  
  function load_table()
  {
      $('.fridge_table1').dataTable( {
          "aaSorting": [[ 4, "desc" ]]
          ,"bJQueryUI": true
      });
  }
  &lt;/script&gt;
  </code></pre>