[SOLVED] Losing jQuery Portlet Functionality after Sort/Select combination

Losing jQuery Portlet Functionality after Sort/Select combination

I've been working on combining jQuery's selectable/sortable/portlet UI's into one. So far, with the help of some posts here on stackoverflow, I have been able to make some decent progress. However, after I was finally able to combine the sort/selectable functionality and drag multiple items to a separate list, I noticed that I was not able to toggle my portlet any longer. This only affects portlets after they have been moved, or even picked up and dropped back into the same position.

EDIT - Pulled out any unnecessary code to functionality.

JS CODE

$(document).ready(function() {             
    $(".group-content").selectable({
        filter: "div:not(.portlet-toggle, .portlet-header, .portlet-content)",
        cancel: ".portlet-toggle, .portlet-header"})
    .sortable({
            connectWith: ".group-content",
            handle: ".portlet-header",
            cancel: ".portlet-toggle",
            cursor: 'move',   
            helper: function(event, ui) {
                if(!ui.hasClass('ui-selected')) {
                    ui.parent().children('.ui-selected').removeClass('ui-selected');
                    ui.addClass('ui-selected');
                }  
                var selected = ui.parent().children('.ui-selected').clone();
                ui.data('multidrag', selected).siblings('.ui-selected').remove();
                return $('<div/>').append(selected);
                },
            stop: function( event, ui ) {   
                var selected = ui.item.data('multidrag');
                ui.item.after(selected);
                ui.item.remove();
},});

    $( ".portlet" )
        .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
        .find( ".portlet-header" )
            .addClass( "ui-widget-header ui-corner-all" )
            .prepend( "<span class='ui-icon ui-icon-plusthick portlet-toggle'></span>");

    $( ".portlet-toggle" ).click(function() {
        var icon = $( this );
        icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
        icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();});
 });

HTML

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>

<div class="group-content" id="Column 1">
<b>Column 1</b>
<div id= "ID_1" class="portlet">
<div class="portlet-header">Task 1</div>
<div class="portlet-content">
<b>Task Number: </b> 1
<b>Description: </b> Some description of task 1
</div>
</div>
</div>

<div class="group-content" id="Column 2">
<b>Column 2</b>
<div id="ID_4" class="portlet">
<div class="portlet-header">Task 4</div>
<div class="portlet-content">
<b>Task Number: </b> 4
<b>Description: </b> Some description of task 4
</div>
</div>
</div>

<div class="group-content" id="Column 3">
<b>Column 3</b>
<div id= "ID_7" class="portlet">
<div class="portlet-header">Task 7</div>
<div class="portlet-content">
<b>Task Number: </b> 7
<b>Description: </b>Some description of task 7
</div>
</div>
</div>
</body>

Any help is appreciated!

Here is a link to jfiddle demonstrating it. jfiddle

Solution

Just change the binding from:

$( ".portlet-toggle" ).click(function() { ... }

to:

$( "body" ).on("click", ".portlet-toggle", function(e) { ... }

After moving elements around, they are not same DOM elements any more. Fiddle