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

Question

我创建了 this Plunk to demonstrate and discuss a shopping cart I'm developing that is in action here（当它持续时）。

在 "real" 中，选择一个物种填充 Variety drop-down。但是，它在 Plunk 中不起作用。

事实上，$('#species-select').on('change', ... 从未开火。

一定是 Plunks 工作方式的一些特殊性。任何 suggestions/workarounds?

编辑只是为了添加一些东西——在 "real" 版本中，我在页面底部加载了 javascript。 Plunker 不喜欢这样。我可以通过添加到 header 来创建解决方法：

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

我希望这是有道理的。

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

JQuery on("change"...) method not working in Plunker

jquery

onchange

jquery-events

plunker