Невозможно выбрать атрибут id на странице, возвращенной ajax

Question

Я хочу реализовать страницу с 2 списками, и она позволяет пользователю перетаскивать элементы между двумя списками. Это можно реализовать с помощью библиотеки пользовательского интерфейса jQuery:

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>

ЯШ:

$( "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/