stewartjustind stewartjustind - 1 year ago 133
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.


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

$( ".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();});


<link rel="stylesheet" href="//">
<script src="//"></script>
<script src="//"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

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

Any help is appreciated!

Here is a link to jfiddle demonstrating it. jfiddle

Answer Source

Just change the binding from:

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


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

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