jquery - 同一页面上的两个 jQuery Ajax 调用，一个有效，另一个无效

Question

我在同一个页面上有两个 Ajax 调用，第一个工作得很好，所以我复制了它并更改了必要的值，因此它们是独立的，但是，第二个 Ajax 调用不起作用。我已经在单独的页面上对其进行了测试并且它工作正常，只有当两个调用都在同一页面上时它才不起作用，我是不是遗漏了什么？

jQuery('#lampbase').on('change', function(){
  var basevalue = $(this).val();
  jQuery.ajax({
    url: 'basesfetch.php',
    method: 'post',
    data: {basevalue1: basevalue},
    success: function(result){                    
      $("#baseresponse").html(result);
      $( "select" ).on('change',function() {
        var str = "";
        // For multiple choice
        $( "select option:selected" ).each(function() {
          str += $( this ).val() + " "; 
          console.log(str);
        });
      });

      jQuery('#lampbase').on('change', function(){
        $(".lampoptions").fadeIn();
      });
      
      jQuery("#lampcolor").change(function(e){
        var DefaultOption = $('option:selected', this).data('code');
        $("#detailcolor option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#FlexColour option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#Switch option[data-code='" + DefaultOption + "']").prop("selected", true);
      });
      
      $("select option").val(function(idx, val) {
        $(this).siblings("[value='"+ val +"']").hide();
      });          
    }
  });
});

jQuery('#lampshade').on('change', function(){
  var shadevalue = $(this).val();
  jQuery.ajax({
    url: 'shadefetch.php',
    method: 'post',
    data: {shadevalue1: shadevalue},
    success: function(result){                    
      $("#shaderesponse").html(result);
      $( "select" ).on('change',function() {
        var str = "";
        // For multiple choice
        $( "select option:selected" ).each(function() {
          str += $( this ).val() + " "; 
          console.log(str);
        });
      });
    }
  });
});

HTML 代码:

<select id="lampbase">
  <option value="first">Select</option>
  <?php 
    $sql = mysqli_query($connection, "SELECT DISTINCT ProductName FROM TableLamps_CSV");
    while ($row = $sql->fetch_assoc()){
      $productname = $row['ProductName'];
      echo "<option value=\"$productname\">" . $row['ProductName'] . "</option>";
    }
  ?>
</select>

<select id="lampshade">
  <option value="first">Select</option>
  <?php 
    $sql = mysqli_query($connection, "SELECT DISTINCT ShapeName FROM shadetable");
    while ($row = $sql->fetch_assoc()){
      $shapename = $row['ShapeName'];
      echo "<option value=\"$shapename\">" . $row['ShapeName'] . "</option>";
    }
  ?>
</select>

Answer 1

代码中存在一些问题，其中一些您可能还没有遇到过。但是阻止您的第二次 AJAX 调用工作的方法非常简单:

问题一:ID重复

您在 SO 上共享的代码中未在此处显示，但我检查了您链接到的网站 ( https://whiz.cz/ItQ )，发现您有两个具有相同 ID 的元素 - lampshade .

有 <select>我们正在研究:

<select id="lampshade">

但是一个div包含该选择的几层也具有相同的 ID:

<div class="container-fluid" ... id="lampshade">

IDs must be unique在页面上。如果您有重复项，并将 ID 用作 jQuery 选择器，only the first one will match .在这种情况下 change select 时要运行的事件处理程序被更改实际上绑定(bind)到 div , 只有 div . div s 没有更改事件，因此永远不会触发。事件处理程序未附加到 select完全没有。

问题2:嵌套的事件处理器

目前，代码在其他事件处理程序内部 添加了事件处理程序。例如在 #lampbase 里面更改处理程序，您添加一个 select更改处理程序，另一个 #lampbase更改处理程序，以及一个 #lampcolor处理程序。问题是事件处理程序不会覆盖、更新或替换以前的处理程序。他们都只是堆叠起来，他们都保持活跃，他们都会跑。在这种特殊情况下，这意味着每次更改 #lampbase选择，添加了 3 个新的处理程序。

Here's a simple JSFiddle demo显示像这样定义的事件处理程序如何叠加。

如果你回去改变那个#lampbase再次选择，在现有的 4 个处理程序之上添加 3 个新处理程序，总共剩下 7 个，并且它们将在每次相关选择器被触发时全部运行。下次换#lampbase ，原始更改处理程序运行，$(".lampoptions")淡入淡出 3 次，构建 str 的代码从选定的选项运行 4 次。

在这种特殊情况下，只要您的用户不经常返回并更改选择，这可能不会导致任何严重问题。但是您可以想象这很容易变得非常困惑，并且您可能会开始注意到您的页面随着所有这些重复的处理程序运行而变得缓慢。

最简单的解决方法是在任何可能重复运行的用户交互之外只定义一次处理程序。如果他们需要使用页面的当前状态 - 例如当前选择的选项 - 让他们确定它们何时运行(而不是在状态是您想要的状态时在流程中定义它们)。

请注意，也可以使用 .on() 动态添加/删除处理程序, 和 .off()当用户与页面交互时，这里不需要额外的复杂性和代码。

小事 1:

无需为 #lampbase 添加单独的更改处理程序进行淡入 - 您已经有了该元素的更改处理程序，只需在其中进行即可。

小事2:

无需定义相同的select处理程序两次，如果您在其他事件处理程序之外定义它。你实际上并没有对 str 做任何事情它生成的，但也许这是你接下来要做的事情:-)

小事 3:

这一行:

$("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);

重复了，可能只是错别字。

这是应用了这些建议/修复的代码:

jQuery('#lampbase').on('change', function () {

    var basevalue = $(this).val();

    jQuery.ajax({
        url: 'basesfetch.php',
        method: 'post',
        data: {
            basevalue1: basevalue
        },
        success: function (result) {
            $("#baseresponse").html(result);

            // No need for a separate handler to do this
            $(".lampoptions").fadeIn();

            // I am not sure what this is doing, but note it is running 
            // for every select on the page.
            $("select option").val(function (idx, val) {
                $(this).siblings("[value='" + val + "']").hide();
            });
        }
    });
});

jQuery('#lampshade').on('change', function () {

    var shadevalue = $(this).val();

    jQuery.ajax({
        url: 'shadefetch.php',
        method: 'post',
        data: {
            shadevalue1: shadevalue
        },
        success: function (result) {
            $("#shaderesponse").html(result);
        }
    });
});

jQuery("#lampcolor").change(function (e) {
    var DefaultOption = $('option:selected', this).data('code');
    $("#detailcolor option[data-code='" + DefaultOption + "']").prop("selected", true);
    $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
    // Duplicated, typo?
    // $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
    $("#FlexColour option[data-code='" + DefaultOption + "']").prop("selected", true);
    $("#Switch option[data-code='" + DefaultOption + "']").prop("selected", true);
});

// Only necessary to define this once, and outside any other handler
$("select").on('change', function () {
    var str = "";
    // For multiple choice
    $("select option:selected").each(function () {
        str += $(this).val() + " ";
        console.log(str);
    });
});