Jquery UIソート可能なリストの更新

Question

こんにちはIamはJquery 1.6.2とJqueryUI 1.8.16を使用しています。 私はJqueryUIでソート可能なリストを持っています。リスト項目から現在のli項目を削除するボタンがあります。また、ダイアログボックスを使用して、ulリストにli項目を追加します。すべて私のプロジェクトは、最初の作業には、並べ替えのオプションも正常に動作しているものは、添付された項目で動作しない削除ボタンが動作しない新しいliの項目を追加した後initisialisationでうまく動作します。 は、ここに私のコード

$.noConflict(); 
jQuery(document).ready(function($) { 
//the sortbale list init 
$("#sortable").sortable({ 
    placeholder: "ui-state-highlight" 
}); 

//when a remove button with class .remo is clicked remove the parent li 
$(".remo").click(function() { 
      $(this).parent().remove(); 
     }); 

//and the dialog to add more li items 
$("#dialog").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 550, 
      modal: true, 
      show: "blind", 
      hide: "explode", 
     buttons: { 
       Add: function() { 
       if($("#mark").val()!="" && $("#series").val()!=""){ 
     var addme = "<li >a new li item <div class='remo'>x</div></li>"; 
        $("#sortable").append(addme); 
        $(this).dialog("close"); 
              } 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 

     }); 

});//end of dom ready 

そして、私のhtmlコード

<div id="dialog" title="Manage ul "> 
<b>Click add for a new one</b><br> 
</div> 
<!--and the sortable list--> 
<ul id="sortable" style="list-style-type: none;margin: 0;padding: 0;"> 
     <li>Li 1 <div class="remo" >x</div></li> 
    <li >Li 2 <button class="remo">x</button> </li> 
    <li >Li 3 <button class="remo" >x</button> </li> 
</ul> 

任意の提案ですか？

Answer 1

イベントハンドラ（clickまたはbindにバインドされている場合）は、セレクタに現在一致する要素にのみ適用されます。

又はon（jQueryの> = 1.7）（jQueryの< 1.7で）使用delegate現在または将来のセレクタに一致する要素にイベントハンドラをバインドします。だからあなたの場合にdelegateを使用して：

$("#sortable").delegate(".remo", "click", function() { 
    $(this).parent().remove(); 
}); 

例：http://jsfiddle.net/bzKzs/