stewartjustind stewartjustind - 6 months ago 45
jQuery Question

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

Answer

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