返されたajaxページからid属性を選択できません

Question

2つのリストを持つページを実装したいと思います。ユーザーは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ドラッグアンドドロップはもはや機能しません。私は、HTMLソースを見ると、<div id='list_b'></div>しか見ることができないので、jQueryがul .sortableを選択できないと思われます。

私の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 
      }); 
     } 
    }); 

を、あなたは、私はこの他のSOの質問は基本的に同じであると考えていhttp://jsfiddle.net/