Jquery 无法加载新添加下拉列表的数据

我需要创建动态下拉列表。我可以根据第一个下拉列表的值加载第二个下拉列表的数据。之后，我还需要添加新的下拉列表行。我可以添加新的下拉行。但我不能为新添加的下拉列表动态加载值

这是我的jQuery，用于为第二个下拉列表加载数据：

<script type="text/javascript">
$(document).ready(function(){
     $("#state").change(function() {
         alert('ok');
         var state = $("#state :selected").text();
        $.ajax({
                url:"http://localhost:8888/ajax/search_attendee.php",
                type:"post",
                data:'state='+ state,
                dataType: "html",
                success:function(data){
                $("#trainer").html(data);
                }
            });

     });

    });
</script>

$（文档）.ready（函数（）{
$（“#状态”）.change（函数（）{
警报（“正常”）；
var state=$（“#state:selected”）.text（）；
$.ajax({
url:“http://localhost:8888/ajax/search_attendee.php",
类型：“post”，
数据：'state='+state，
数据类型：“html”，
成功：功能（数据）{
$（“#trainer”）.html（数据）；
}
});
});
});

这是用于加载新行的jQuery。我可以通过这个函数添加行。但我无法加载第二个下拉列表的数据。有人能帮我做这个吗

<script type="text/javascript">
$(function() {
     var addDiv = $('#addinput');
     var i = $('#addinput p').size() + 1;

     $('#addNew').live('click', function() {
      $('<p>'+
                   '<table id="datatable"><tr><td width="220"></td><td>'+
                    '<select name="state_' + i +'" id="state">'+
                    '<option value="0">Select State</option>'+
                    '<option value="1">QLD</option>'+
                    '<option value="2">NSW</option>'+
                    '<option value="3">VIC</option>'+
                    '<option value="4">WA</option>'+
                    '<option value="5">ACT</option>'+
                    '<option value="6">NT</option>'+
                    '<option value="7">SA</option>'+
                    '<option value="8">TAS</option>'+
                    '</select>'+
                    '<select name="trainer_' + i +'" id="trainer"><option>Select Trainer</option></select>'+
                    '<a href="#" id="remNew">Remove</a></td></tr></table></p>').appendTo(addDiv);
         i++;


 });

    $('#remNew').live('click', function() { 
            if( i > 2 ) {
            $(this).parents('p').remove();
            i--;
       }

});
});
</script>

$（函数（）{
var addDiv=$（“#addinput”）；
变量i=$（'#addinput p'）.size（）+1；
$（'#addNew'）.live（'单击'，函数（））{
$（“”+
''+
''+
“选择状态”+
“QLD”+
“新南威尔士州”+
“维克”+
“哇”+
“行动”+
“新台币”+
“萨”+
“助教”+
''+
“选择培训师”+
“
”）。附录（addDiv）；
i++；
});
$（'#remNew'）.live（'click'，function（）{
如果（i>2）{
$（this.parents（'p'）.remove（）；
我--；
}
});
});

对于动态添加的元素，您需要将事件委托给最接近的静态父级。在您的案例中，哪个是

#state

    $(document).on('change','#state',function() {
        alert('ok');
        var state = $("#state :selected").text();
       .....

如果您使用的是最新的jquery版本，即1.6，您可能还需要将

live（）

更改为

on（）

+ 因为live已被弃用

  $(document).on('click','#addNew',function() {
     ....


  $(document).on('click','#remNew', function() { 
     ...

---

但这是可行的，将动态元素委托给插入时文档中最接近的静态元素比使用文档本身的性能更好。

您能为此创建一个提琴吗？我根据您的答案进行了更改。但我仍然只能在第一行加载第二个下拉列表的数据。在使用下拉列表我无法加载第二个下拉列表的数据。请确保每个元素的id都是唯一的。。听起来你对多个元素有相同的id…你能创建一个小提琴吗？