如何使用jQuery访问动态创建的<select>标签下拉列表的值属性？

Question

这是jsfiddle链接到我想要做的小样本http://jsfiddle.net/dscLc/8/

Javascipt代码

newc=function(){
$('#div').html('<center><select id="resClass"><option value="" selected>FIRST</option></select><center>');
    for(var i=0;i<10;i+=1)
    {
        $('#resClass').append('<option value="'+i+'">'+i+'</option>');
    }
}

$(document).ready(function(){
    $("#resClass").change(function(){
        alert($(this).val());
    });
});

HTML代码就在这里

<div id="div">
    <center>
        <button type="button" onclick="newc()">Compare</button>
    </center>
</div>

Answer 1

此外,您似乎有一个带有id的静态父级,#div因此您可以委托给此元素.虽然$(document) && $(document.body)始终可用于事件委派,但这在性能方面非常缓慢.

最好将事件委托给最近的静态父级,其中dom查找时间较短且性能较快.

改变这个:

$("#resClass").change(function(){

对此:

$("#div").on('change', "#resClass", function(){

这是事件委托的案例.

这意味着如果动态生成任何元素,那么您就无法以当前尝试绑定的方式将事件绑定到该元素,因为当dom准备就绪时,此元素在该时间点不可用.