JQuery on（“ change” ...）方法在Plunker中不起作用

Question

[我创建了this Plunk来演示和讨论我正在开发的正在使用中的购物车here（持续有效）。

在“真实”品种中，选择一个品种会填充“品种”下拉列表。但是，它在Plunk中不起作用。

实际上，$('#species-select').on('change', ...从不触发。

必须是Plunks如何工作的特殊之处。有任何建议/解决方法吗？

编辑只是添加一些内容-在“实际”版本中，我将javascript加载到页面底部。 Plunker不喜欢那样。我可以通过添加标题来创建解决方法：

<script type='text/javascript'>
  $(document).ready(function(){
      $('#species-select').on('change', function() {
      var variety_key = $('#species-select').val();
      console.log( "species changed to " + variety_key);
      alert( "species changed to " + variety_key);
      $('#variety-select').empty();
      fillVarietiesList(variety_key);
    });
  });
</script>

http://plnkr.co/edit/91FYs44DuLkS19YPLzd6?p=info

进一步更新那仍然不太奏效，因为我无法将商品添加到购物车中。我发现这可以解决问题：

<script type='text/javascript'>
  $(document).ready(function(){
      $.getScript('products.js');
      $.getScript('fill_selects.js');
      $.getScript('shopping_cart.js');
      $('#species-select').on('change', function() {
      var variety_key = $('#species-select').val();
      console.log( "species changed to " + variety_key);
      alert( "species changed to " + variety_key);
      $('#variety-select').empty();
      fillVarietiesList(variety_key);
    });
  });
</script>

http://plnkr.co/edit/91FYs44DuLkS19YPLzd6?p=preview

Answer 1

这是因为在jQuery运行时，它会将事件挂接到不存在的dom元素上，因此没有任何附加内容。可以通过将钩子切换为“ on”事件来解决此问题：

$(document).on('change','#species-select', function...

我希望这是有道理的。