无法使用jquery选择第一个动态生成的选择项

Question

我在页面上动态生成了一个jQuery选择控件。生成的选择在下面给出。

<select id="autoCompleteSelect" size="5" class="autoSelect"> 
    <option value="firstVal">firstVal</option> 
    <option value="secondVal">secondVal</option> 
</select> 

现在我想选择我的文本框的keyup事件这个选择控件的第一项。但我不能这样做。键盘代码是 -

 $('#searchInput').keyup(function (e) { 
      var a = $(".autoSelect").val(); 
      var myDDL = $('.autoSelect'); 
      myDDL[0].selectedIndex = 0; 
     }); 

但是，当我不生成动态选择，只是从头开始把它放在页面上。一切正常。什么可能是动态生成选择的解决方案。

Answer 1

$("#autoCompleteSelect").val($("#autoCompleteSelect option:first").val());

http://jsfiddle.net/oob1ybxp/

Answer 2

保持代码的形式类似于

$('someStaticSelector').on('keyup', 'DynamicAddedSelector', function (e) { 
      var a = $(".autoSelect").val(); 
      var myDDL = $('.autoSelect'); 
      myDDL[0].selectedIndex = 0; 
     }); 

Answer 3

如果用动态生成的内容的工作，最好是使用如下event delegation概念：

// document here can be replaced with closest parent which 
// created/ existed without dynamic load 
// provided context parameter to on function 
$(document).on('keyup','#searchInput', function (e) { 
    var a = $(".autoSelect").val(); 
    var myDDL = $('.autoSelect'); 
    myDDL[0].selectedIndex = 0; 
}); 

也请阅读.on()。