无法从 ajax 返回的页面中选择 id 属性

Question

我想实现一个包含 2 个列表的页面，它允许用户在两​​个列表之间拖放项目。这可以通过使用 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。有什么想法吗？

Answer 1

第一个：

元素 $('#field_a h3 a') 是什么？

秒：

它不起作用，因为当你这样做时 $('#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/上会更有帮助