Question

Hello there Iam using Jquery 1.6.2 and JqueryUI 1.8.16
I have a sortable list with JqueryUI.Each Li item has a button (with x) which removes the current li item from the list. Also I use a dialog box to add more li items to the ul list. All though my project works well on the initisialisation after appending the new li items the remove buttons don’t work on the appended items don’t work, the ones that are in first work fine, the sort options work fine too.
here is my code

$.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

And my html code

<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>

Any suggestions?

Answer 1

Event handlers (when bound with click or bind) are only applied to elements currently matching the selector.

Use delegate (in jQuery < 1.7) or on (jQuery >= 1.7) to bind event handlers to elements that match the selector now or in the future. So using delegate in your case:

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

Example: http://jsfiddle.net/bzKzs/