Jquery UI sortable list update

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?

Andrew Whitaker · Accepted Answer · 2012-01-05 02:09:07Z

2

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/

answered Jan 5, 2012 at 2:09

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery UI sortable list update

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related