title: Execute AJAX call after AJAX Load
body: <p>AJAX itself is pretty new to me, and while I can, for the most part, muddle my through and figure things out, this one has plagued me for a few days.  </p>
  
  <p>I have a page that is split into 2 columns.  On the left is a list of jobs shown in a table.  When a table row is clicked, the details of the selected job are loaded via ajax on the right side of the page by way of this script:</p>
  
  <pre><code>$(".jobTable").on("click", "tr", function() {
    var job_id = $("td:first a.ajaxCall", this).attr("rel");
    $("#jobDetails").html("Loading...");
  
    $.ajax({
      type: "GET",
      url: "jobs/jobdetails.php",
      data: {
        'id': job_id
      },
      success: function(data) {
        $("#jobDetails").html(data);
        $('#validation').html("");
      }
    });
    return false;
  });
  </code></pre>
  
  <p>This works fine by itself.  </p>
  
  <p>I wanted to add a dropdown menu that would allow sorting between open jobs, completed jobs, jobs waiting to be invoiced, and all jobs.  I accomplished this by simply making 4 separate pages with the appropriate SELECT statements and used this function:  </p>
  
  <pre><code>$(document).ready(function() {
    $("#jobSorter").change(function() {
      $("select option:selected").each(function() {
  
        if ($(this).attr("value") == "open-jobs") {
          $.ajax({
            url: "jobs/open-jobs.php",
            success: function(data) {
              $("#activeJobTable").html(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              alert("Status: " + textStatus);
              alert("Error: " + errorThrown);
            }
          });
        }
  
        if ($(this).attr("value") == "closed-jobs") {
          $.ajax({
            url: "jobs/closed-jobs.php",
            success: function(data) {
              $("#activeJobTable").html(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              alert("Status: " + textStatus);
              alert("Error: " + errorThrown);
            }
          });
        }
  
        if ($(this).attr("value") == "waiting-for-invoice") {
          $.ajax({
            url: "jobs/waiting-for-invoice.php",
            success: function(data) {
              $("#activeJobTable").html(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              alert("Status: " + textStatus);
              alert("Error: " + errorThrown);
            }
          });
        }
        if ($(this).attr("value") == "all-jobs") {
          $.ajax({
            url: "jobs/all-jobs.php",
            success: function(data) {
              $("#activeJobTable").html(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              alert("Status: " + textStatus);
              alert("Error: " + errorThrown);
            }
          });
        }
      });
    }).change();
  });
  </code></pre>
  
  <p>This also works fine by itself, but as soon as I started loading the tables through ajax, it no longer responded to this script.  Nothing at all happens when I click on the table.  Through a bit of research, I thought the answer relied on my putting the first function into under "complete:" within the selector script, but all that happens then is the tables fail to load.  </p>
  
  <p>How can I keep the functionality of loading the job details while using the select menu to load the job lists?</p>
  
  <p>Edit:  Here is the HTML for the page on which all this is happening:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4" id="jobList"&gt;
  
      &lt;form class="form-horizontal"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="col-sm-2 control-label" for="jobSorter"&gt;View Only:&lt;/label&gt;
  
          &lt;div class="col-sm-10"&gt;
            &lt;select class="form-control" name="jobSorter" id="jobSorter"&gt;
              &lt;option value="open-jobs"&gt;Open Jobs&lt;/option&gt;
              &lt;option value="closed-jobs"&gt;Closed Jobs&lt;/option&gt;
              &lt;option value="waiting-for-invoice"&gt;Waiting for Invoice&lt;/option&gt;
              &lt;option value="all-jobs"&gt;All Jobs&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;div id="activeJobTable" &lt;/div&gt;
        &lt;div class="col-md-8"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-lg-12" id="validation"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div id='jobDetails'&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the open-jobs.php page (the rest are all the same, only the query changes):</p>
  
  <pre><code>&lt;?php require 'libraries/database.php'; $query="SELECT jobs.*, customers.cust_name, customers.id FROM `jobs`
  INNER JOIN customers ON jobs.customer = customers.id
  WHERE status != 'Completed' ORDER by job_id" ; $jobs=$ mysqli-&gt;query($query) or die($mysqli-&gt;error . __LINE__); ?&gt;
  
  
  
  &lt;table class="table table-hover jobTable" data-link="row"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="col-md-2"&gt;Job #&lt;/th&gt;
  
        &lt;th class="col-md-4"&gt;Customer Name&lt;/th&gt;
  
        &lt;th class="col-md-6"&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;?php while ($row=m ysqli_fetch_array($jobs)) { $jobid=$ row[ 'job_id']; $query="SELECT * FROM parts WHERE job = '$jobid' AND status != 'In Stock'" ; $result=m ysqli_query($mysqli, $query); $partrows=m ysqli_num_rows($result); if ($partrows&gt;0) { $highlight = 'warning'; } else { $highlight = ''; } echo '
      &lt;tr class="' . $highlight . '" id="row'.$row['job_id'].'"&gt;'; echo '
        &lt;td&gt;
          &lt;a class="ajaxCall" href="#" rel="' . $row['job_id'] . '"&gt;&lt;/a&gt;' . $row['job_id'] . '&lt;/td&gt;'; echo '
        &lt;td&gt;' . $row['cust_name'] . '&lt;/td&gt;'; echo '
        &lt;td class="col-lg-2"&gt;' . $row['description'] . '&lt;/td&gt;'; echo '&lt;/tr&gt;'; } ?&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>