JQuery on("change"...) 方法在 Plunker 中不起作用

Question

我创建了this Plunk 来演示和讨论我正在开发的购物车here（在持续期间）。

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

事实上，$('#species-select').on('change', ... 永远不会触发。

一定是 Plunks 工作方式的一些特殊性。有什么建议/解决方法吗？

编辑 只是为了添加一些东西——在“真实”版本中，我在页面底部加载了 javascript。普伦克不喜欢那样。我可以通过添加到标题来创建解决方法：

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

我希望这是有道理的。