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/

，那会更有帮助

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

1 个答案: