jquery - Why does the toggling of the class just work partially for a few elements and not always the same? -

jquery - Why does the toggling of the class just work partially for a few elements and not always the same? -

i have tried implement picklist 1 in primefaces jquery , jquery-ui.

to combine multiselect , sortable have function toggles class onclick , allows user select multiple elements using ctrl-button.

sorting, selecting , moving in between lists works fine have implement same functionality have drag , drop using buttons.

now problem if illustration move item (with button!) toggling doesn't work anymore or partially.

can help me?

i created fiddle this, functions buttons arent't called , don't know why.

http://jsfiddle.net/p59vj/14/ edit:

fiddle less code: http://jsfiddle.net/p59vj/15/

my code:

javascript/jquery:

var selectedlist = new array(); var selectedchoice = new array(); var selected = new array(); jquery(function() { jquery('#liste, #auswahl').sortable({ connectwith:".ui-picklist-list", }); jquery('#liste, #auswahl').children().click( function (eventobject){ if(!eventobject.ctrlkey) { jquery(".ui-picklist-item").removeclass("ui-state-highlight"); } jquery(this).toggleclass("ui-state-highlight"); }); }); function initmultiselect(){ jquery('#liste, #auswahl').children().click( function (eventobject){ if(!eventobject.ctrlkey) { jquery(".ui-picklist-item").removeclass("ui-state-highlight"); } jquery(this).toggleclass("ui-state-highlight"); }); } function hasclass(element, cls) { var r = new regexp('\\b' + cls + '\\b'); homecoming r.test(element.classname); } function moveup(id){ for(var i=1; i<document.getelementbyid(id).getelementsbytagname("li").length; i++){ if(hasclass(document.getelementbyid(id).getelementsbytagname("li")[i],"ui-state-highlight")){ var e1 = document.getelementbyid(id).getelementsbytagname("li")[i]; var e2 = document.getelementbyid(id).getelementsbytagname("li")[i-1]; if(e1 && e2) { //nodes found var parent = e1. parentnode; var clones = [ e1. clonenode(true), e2. clonenode(true) ]; //toggle (replace nodes) parent. replacechild(clones[1], e1); parent. replacechild(clones[0], e2); } } } jquery('#'+id).children().click( function (eventobject){ if(!eventobject.ctrlkey) { jquery(".ui-picklist-item").removeclass("ui-state-highlight"); } jquery(this).toggleclass("ui-state-highlight"); }); }

html-code:

<table id="j_idt14:j_idt19" class="ui-picklist ui-widget"> <tbody> <tr> <td class="ui-picklist-source-controls"> <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-up" title="move up" type="button" onclick="moveup('liste');"> <span class="ui-button-icon-left ui-icon ui-icon ui-icon-arrow-1-n"></span> <span class="ui-button-text">moveup</span> </button> </td> <td> <div class="ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr">liste</div> <ul class="ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom" id="liste"> <li class="ui-picklist-item" id="pick1">messi - 10</li> <li class="ui-picklist-item" id="pick2">iniesta - 8</li> <li class="ui-picklist-item" id="pick3">villa - 7</li> <li class="ui-picklist-item" id="pick4">alves - 2</li> <li class="ui-picklist-item" id="pick5">xavi - 6</li> <li class="ui-picklist-item" id="pick6">puyol - 5</li> </ul> </td> <td> </td> <td> <div class="ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr">auswahl</div> <ul class="ui-widget-content ui-picklist-list ui-picklist-target ui-corner-bottom " id="auswahl"> <li class="ui-picklist-item " id="choice1">element 1</li> <li class="ui-picklist-item " id="choice2">element 2</li> <li class="ui-picklist-item " id="choice3">element 3</li> <li class="ui-picklist-item " id="choice4">element 4</li> <li class="ui-picklist-item" id="choice5">element 5</li> <li class="ui-picklist-item " id="choice6">element 6</li> <li class="ui-picklist-item " id="choice7">element 7</li> <li class="ui-picklist-item " id="choice8">element 8</li> </ul> </td> <td class="ui-picklist-target-controls"> <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-up" title="move up" type="button" onclick="moveup('auswahl')"> <span class="ui-button-icon-left ui-icon ui-icon ui-icon-arrow-1-n"></span> <span class="ui-button-text">moveup</span> </button> </td> </tr> </tbody> </table>

css:

.ui-picklist .ui-picklist-list { height: 200px; list-style-type: none; margin: 0; overflow: auto; padding: 0; width: 200px; } .ui-picklist .ui-picklist-list li { margin: 1px; padding: 2px; } .ui-picklist .ui-button { display: block; margin-bottom: 0.3em; margin-left:0.4em; background: transparent url(../dsv_assets/images/datepicker_button.png) no-repeat; border:none; } .ui-picklist .ui-picklist-item { border: 0 none; cursor: pointer; font-weight: inherit; } .ui-picklist .ui-picklist-caption { border-bottom: 1 none; padding: 4px 10px; text-align: center; } .ui-picklist table { border-collapse: collapse; width: 100%; } .ui-picklist > tbody { } .ui-picklist-item div{ width: 20px; float: right; height: 13px; } .ui-picklist-caption{ color: black !important; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state- highlight {background: highlight; color: white;}

ok found mistake. when clone list-elements move them or downwards list or other list click event gets lost initialized every time after moved 1 or more items. because of of list-items had more on click function, when clicked them , had number of click events looked click event wasn't fired because class toggled , toggled in same moment again.

the problem why elements aren't highlighted when drag , drop them click event fired when mouse button pressed , allow loose not if it's pressed.

solution: after move 1 or more list items phone call function this:

jquery([all picklist items]).unbind('mousedown'); jquery([all picklist items]).mousedown( function (eventobject){ if(!eventobject.ctrlkey) { jquery(".ui-picklist-item").removeclass("ui-state-highlight"); } jquery(this).toggleclass("ui-state-highlight"); });

jquery jquery-ui jquery-ui-sortable toggleclass