javascript - AJAX 加载后执行 AJAX 调用

Question

AJAX 本身对我来说相当陌生，虽然在大多数情况下我可以糊涂并解决问题，但这个问题已经困扰了我几天。

我的页面分为两列。左侧是表格中显示的作业列表。单击表行时，所选作业的详细信息将通过页面右侧的 ajax 通过以下脚本加载:

$(".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;
});

这本身就可以很好地工作。

我想添加一个下拉菜单，允许在未完成的作业、已完成的作业、等待开具发票的作业以及所有作业之间进行排序。我通过简单地使用适当的 SELECT 语句创建 4 个单独的页面并使用此函数来实现此目的:

$(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();
});

这本身也可以正常工作，但是当我开始通过 ajax 加载表时，它就不再响应该脚本。当我点击 table 时什么也没有发生。通过一些研究，我认为答案取决于我将第一个函数放入选择器脚本中的“完整:”下，但随后发生的只是表无法加载。

如何在使用选择菜单加载作业列表的同时保留加载作业详细信息的功能？

编辑:这是发生这一切的页面的 HTML:

<div class="row">
  <div class="col-md-4" id="jobList">

    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label" for="jobSorter">View Only:</label>

        <div class="col-sm-10">
          <select class="form-control" name="jobSorter" id="jobSorter">
            <option value="open-jobs">Open Jobs</option>
            <option value="closed-jobs">Closed Jobs</option>
            <option value="waiting-for-invoice">Waiting for Invoice</option>
            <option value="all-jobs">All Jobs</option>
          </select>
        </div>
      </div>
    </form>
    <div id="activeJobTable" </div>
      <div class="col-md-8">
        <div class="row">
          <div class="col-lg-12" id="validation"></div>
        </div>
        <div class="row">
          <div id='jobDetails'>

          </div>
        </div>
      </div>
    </div>

还有 open-jobs.php 页面(其余部分都一样，只是查询发生了变化):

<?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->query($query) or die($mysqli->error . __LINE__); ?>



<table class="table table-hover jobTable" data-link="row">
  <thead>
    <tr>
      <th class="col-md-2">Job #</th>

      <th class="col-md-4">Customer Name</th>

      <th class="col-md-6">Description</th>
    </tr>
  </thead>
  <tbody>
    <?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>0) { $highlight = 'warning'; } else { $highlight = ''; } echo '
    <tr class="' . $highlight . '" id="row'.$row['job_id'].'">'; echo '
      <td>
        <a class="ajaxCall" href="#" rel="' . $row['job_id'] . '"></a>' . $row['job_id'] . '</td>'; echo '
      <td>' . $row['cust_name'] . '</td>'; echo '
      <td class="col-lg-2">' . $row['description'] . '</td>'; echo '</tr>'; } ?>
  </tbody>
</table>

Answer 1

我认为你想改变

$("#jobSorter").change(function() {
$("select option:selected").each(function() {

  if ($(this).attr("value") == "open-jobs") {

至

$("#jobSorter").change(function() {

  if ($(this).val() == "open-jobs") {

您不需要为每个选定的选项创建一个事件。当 jobSorter 更改时，$(this).val() 将保存所选值。我不知道这是否是问题的根源，但你的做法似乎是错误的。

所以

$(document).ready(function() {
$("#jobSorter").change(function() {

  if ($(this).val() == "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).val() == "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).val() == "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).val() == "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);
      }
    });
  }
 });
});

因为您在需要事件委托(delegate)后将表加载到 DOM，所以您需要更改

$(".jobTable").on("click", "tr", function() {

至

$(document).on('click','.jobTable tr",function() {