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

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准备好时，该元素在那个时间点是不可用的

Answer 2

当您动态添加select时，您需要事件委托:

事件委托允许我们在父元素上附加一个事件监听器，它将为所有匹配选择器的后代触发，无论这些后代现在存在还是将来添加。

$("#div").on('change','#resClass',function(){
    alert($(this).val());
});

演示工作

Answer 3

工作演示:http://jsfiddle.net/Lcr5t/

API: .on - http://api.jquery.com/on/

休息应适合需要:)

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(){
    $(document).on('change',"#resClass",function(){
        alert($(this).val());
    });
});

Answer 4

您的事件连接需要使用'on'来将其应用于注册后随后创建的任何控件:

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

Answer 5

您必须使用委托事件，如.on, .bind, .live

Answer 6

你的代码有一个小问题。

首先，您没有调用函数newc()。其次，由于select元素是动态添加的，因此不会触发change()。

请检查以下代码:

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>');
    }
}
newc();
$(document).on('change','#resClass',function(){
    alert($(this).val());
});

小提琴