0

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

这是我的 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>

这是用于加载新行的 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>
4

1 回答 1

1

您需要将您的事件委托给最接近的静态父on用途以动态添加元素。这是#state你的情况

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

如果您使用的是最新的 jquery 版本，即 1.6+ ，则可能还需要更改live()为，因为 live 已被弃用on()

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


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

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

于 2013-10-18T06:05:26.010 回答