Javascript JQuery的。更改未注册

我是一个JQuery程序员新手，遇到了一些麻烦。我正在尝试创建仅在前一个框被赋予值后才处于活动状态的框。我已经成功地对第一个禁用的框StatSelection执行了此操作，但是当我从此框中进行选择时，它无法触发.change函数。请有经验的人告诉我为什么会这样。所以我可以让它为StatSelection工作，但是当我从StatSelection的列表中选择一个值时，它拒绝注册onchange事件。我正在使用Twitter引导程序3。谢谢

HTML

JQuery

<script type="text/javascript">
  $( document ).ready(function() {
    $( "#YearSelection" ).change(function(){
      $("#StatSelection").replaceWith($('<select id="StatSelection" class="form-control">'));
      $("#StatSelection").append('<option>Gbatting</option>');
      $("#StatSelection").append('<option>AB</option>');
      $("#StatSelection").append('<option>R</option>');
      $("#StatSelection").append('<option>H</option>');
      $("#StatSelection").append('<option>2B</option>');
      $("#StatSelection").append('<option>3B</option>');
      $("#StatSelection").append('<option>HR</option>');
      $("#StatSelection").append('<option>RBI</option>');
    });
    $("#StatSelection").on('change',function(){
      alert( $("#StatSelection").val());
      $("#SizeofTable").replaceWith($('<select id="SizeofTable" class="form-control">'));
      $("#SizeofTable").append('<option value="5">5</option>');
      $("#SizeofTable").append('<option value="10">10</option>');
      $("#SizeofTable").append('<option value="15">15</option>');
      $("#SizeofTable").append('<option value="20">20</option>');
      $("#SizeofTable").append('<option value="25">25</option>');
      $("#SizeofTable").append('<option value="30">30</option>');
      $("#SizeofTable").append('<option value="40">40</option>');
      $("#SizeofTable").append('<option value="50">50</option>');
      $("#SizeofTable").append('<option value="100">100</option>');
    });
  });
</script>

---

您正在创建一个全新的DOM元素，这意味着您必须注册一个新的javascript处理程序。您还应该利用jQuery的菊花链和多参数传递功能：

$("#StatSelection").on('change',function(){
    alert( $("#StatSelection").val());
    $("#SizeofTable").replaceWith(
        $('<select id="SizeofTable" class="form-control">').append(
            '<option value="5">5</option>',
            '<option value="10">10</option>',
            '<option value="15">15</option>',
            '<option value="20">20</option>',
            '<option value="30">30</option>',
            '<option value="40">40</option>',
            '<option value="50">50</option>',
            '<option value="100">100</option>'
        ).on("change", function () {
            // Put the next replace code here
        })
    );
});

---

您正在创建一个全新的DOM元素，这意味着您必须注册一个新的javascript处理程序。您还应该利用jQuery的菊花链和多参数传递功能：

$("#StatSelection").on('change',function(){
    alert( $("#StatSelection").val());
    $("#SizeofTable").replaceWith(
        $('<select id="SizeofTable" class="form-control">').append(
            '<option value="5">5</option>',
            '<option value="10">10</option>',
            '<option value="15">15</option>',
            '<option value="20">20</option>',
            '<option value="30">30</option>',
            '<option value="40">40</option>',
            '<option value="50">50</option>',
            '<option value="100">100</option>'
        ).on("change", function () {
            // Put the next replace code here
        })
    );
});

使用replaceWith时，将StatSelection替换为新元素，因此第二次更改无效，请尝试以下操作：

  // $("#StatSelection").replaceWith($('<select id="StatSelection" class="form-control">'));
  $("#StatSelection").removeAttr('disabled')

选中此项。

当您使用replaceWith时，将StatSelection替换为新元素，因此第二次更改无效，请尝试以下操作：

  // $("#StatSelection").replaceWith($('<select id="StatSelection" class="form-control">'));
  $("#StatSelection").removeAttr('disabled')

选中此项。

一种解决方案是将STAT选择作为选择器提供给on功能。如果它看起来像这样，您所拥有的将起作用：

$(document).on('change', '#StatSelection', function(){
    ...
});

请参见此处的完整示例：

这里需要记住的是，在创建元素之前，不能将其绑定到该元素。上面的语句之所以有效，是因为文档在运行时已经被定义了。运行此命令时：

$("#StatSelection").replaceWith($('<select id="StatSelection" class="form-control">'));

您所做的是创建一个全新的元素，默认情况下它没有任何绑定

一种解决方案是将StatSelection作为选择器提供给on函数。如果它看起来像这样，您所拥有的将起作用：

$(document).on('change', '#StatSelection', function(){
    ...
});

请参见此处的完整示例：

这里需要记住的是，在创建元素之前，不能将其绑定到该元素。上面的语句之所以有效，是因为文档在运行时已经被定义了。运行此命令时：

$("#StatSelection").replaceWith($('<select id="StatSelection" class="form-control">'));

---

您所做的是创建一个全新的元素，默认情况下它没有任何绑定

您是否厌倦了在每次更改中使用console.log？是否厌倦了在每次更改中使用console.log？谢谢，我将尝试一下！谢谢，我会试试的！谢谢你的回复。谢谢你的回复。