IE8 中的 jQuery on() 变化

Question

使用 jQuery 1.7.1，我尝试为下拉列表上的更改事件创建一个事件处理程序。下拉列表会动态添加到 DOM 中。似乎在大多数浏览器上都能很好地工作，但是哦，奇怪的 IE8 想要变得困难。有解决方法吗？ 应该这有效吗？我在这里和其他地方进行了大量阅读，在许多情况下，输入似乎是冲突的，并且我发现/尝试过的建议解决方案对我不起作用。

谁能澄清这是否适用于 IE8 中动态创建的 .state-seletor 下拉列表？

$( document ).on( 'change', '.state-selector', function( e ) {
  e.preventDefault();
  alert( 'ON()' );
});

我会继续探索，但如果有人能在我失去理智之前解决这个问题，我将不胜感激。

谢谢。

更新

根据下面@Wertisdk的请求，这是我的下拉片段:

<select name="data[Contractor][service_area_state]" class="state-selector">
  <option value="">Select a state...</option>
  <option value="AK">Alaska</option>
  <option value="AL">Alabama</option>
  ...
  <option value="WI">Wisconsin</option>
  <option value="WV">West Virginia</option>
  <option value="WY">Wyoming</option>
</select>

更新2

就 @mblase75 的观点而言，也许用于生成动态下拉菜单的方法很重要。本质上，我正在克隆一个现有的 DOM 节点并清空在那里选择的值。需要注意的是，.additionalink a也是动态生成的。当您单击 .addtionallink a 时，正在克隆的模板将包含一个新的 .addtionallink a 节点:

$( document ).on( 'click', '.additionallink a', function( e ) {
  e.preventDefault();

  var copy = $( this ).closest( '.template' ).clone();

  // Massage the template copy's content and insert it
  // - Clear the value selected in the original dropdown
  // - Clear the list of counties loaded based on the original dropdown selection
  $( '.state-selector', copy ).val( $( '.state-selector option:first', copy ).val() );
  $( '.counties', copy ).empty();
  $( this ).closest( '.template' ).after( copy );
});

更新3

这是一个类似的 JSFiddle 。这几乎是我的代码，但是有一个关键的区别可能是全部的区别。该 fiddle 使用 .append() 根据状态选择插入新内容。我的代码使用 .load() 方法。否则，都是一样的。

Answer 1

我认为这里的神奇词是.clone()，您可能会遇到这个错误，该错误已在1.7.2 beta中修复:http://bugs.jquery.com/ticket/11076