Question

AJAX本身对我来说是一个新手，虽然我可以在大多数情况下让我陷入困境并弄清楚事情，但这个问题困扰了我几天。

我有一个分为2列的页面。左侧是表格中显示的作业列表。单击表格行时，将通过此脚本通过页面右侧的ajax加载所选作业的详细信息：

let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! CustomCollectionViewCell
cell.setNeedsLayout()
cell.layoutIfNeeded()

这本身就可以正常工作。

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

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

这也可以正常工作，但是一旦我开始通过ajax加载表，它就不再响应这个脚本了。点击桌子后什么都没发生。通过一些研究，我认为答案依赖于我将第一个函数置于选择器脚本中的“complete：”下，但所有发生的情况都是表无法加载。

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

编辑：以下是发生这一切的页面的HTML：

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

open-jobs.php页面（其余都是一样的，只有查询更改）：

<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>

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

因为您在需要事件分段后将表加载到DOM，所以您需要更改

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

到

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

在AJAX Load之后执行AJAX调用

1 个答案: