无法从ajax返回的页面中选择id属性 - Unable to select id attribute from ajax returned page

Unable to select id attribute from ajax returned page

本文关键字：选择 id 属性 ajax 返回 | 更新日期: 2023-09-27

我想实现一个有两个列表的页面，它允许用户在两个列表之间拖放项目。这可以通过使用jQuery UI库来实现：

html:

<!--list A-->
<div id='list_a'>
  <ul class='sortable'></ul>
</div>
<!--list B-->
<div id='list_b'>
  <ul class='sortable'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

js:

$( "ul.sortable" ).sortable({
    connectWith: "ul",
    dropOnEmpty: true
});
$( ".sortable" ).disableSelection();

问题是，当我使用jQuery-ajax生成list B时，拖放操作不再起作用。我怀疑jQuery无法选择ul .sortable，因为当我查看HTML源代码时，我只能看到<div id='list_b'></div>。

我的ajax代码：

$('#field_a h3 a').click(function() {
    var form_data = {
        required_data:$(this).text().trim(),
        ajax: 1
    };
    $.ajax({
        url: 'get_list_b',
        dataType: 'html',
        type:'POST',
        success: function(msg){
            $('#list_b').html(msg);
        }
   });
});

我正在使用CodeIgniter。知道吗？

第一个：

什么是元素$（'#field_ah3a'）？

秒：

它不起作用，因为当您执行$（'#list_b'）.html（msg）时，您正在删除UL元素。

因此，您的绑定引用到不存在的元素。

你可以这样做：

$.ajax({
        url: 'get_list_b',
        dataType: 'html',
        type:'POST',
        success: function(msg){
            var list=$('#list_b');
            list.html(msg);
            $( "ul.sortable",list ).sortable({
                connectWith: "ul",
                dropOnEmpty: true
            });
        }
   });

如果你能把你的例子放在http://jsfiddle.net/