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

此外，您似乎拥有一个标识为#div的静态父级，因此您可以委托此元素。尽管$(document) && $(document.body)始终可用于事件委派，但这在性能方面非常慢。

最好将事件委托给最近的静态父级，其中dom查找时间较短且性能较快。</ p>

改变这个：

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

到此：

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

这是事件委托的案例。

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

Answer 2

当您动态添加选择时，您需要event delegation：

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

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

<强> Working Demo

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

你的事件连接需要使用＆＃39; on＆＃39;将其应用于随后在注册后创建的任何控件：

$(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());
});

FIDDLE

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

6 个答案: