jquery sortable item cached? #sortable items: '.class1' filter is not working when class is changed dynamically
<p>i came across a weird problem today:
i created a sortable list of divs. each div has a class="class1" and items is set to 'class1' (see below simplified code). each div has an a href link that calls a function toggleLock. this function replaces class="class1" with class="locked" for that div.
for example:  will become </p>

<p>the problem is: even though #sortable is set to "make" only items with class="class1" sortable, replacing the class still allows  to be sortable. seems like item class is cached at some point. </p>

<ol>
<li>i've tried to refresh #sortable ($('#sortable').sortable("refreshPosition") and $('#sortable').sortable("");), but that didn't work.</li>
<li>i've tried both ways of replacing the class: attr('class','lock') and removeClass(), then addClass(). still  is sortable.</li>
<li>if class is not changed dynamically, but loads into DOM as , then it's not sortable as expected.</li>
</ol>

<p>why wouldn't replacement of the class from class1 to locked prevent that div from being sortable? am i missing something?</p>

<p>sample code:</p>

<pre><code>&lt;div id="sortable"&gt;
       &lt;div class="class1" id="1"&gt;
          &lt;div class="sortHandle"&gt;....&lt;/div&gt;
               &lt;href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R1"&gt;lock&lt;/a&gt;
              &lt;p&gt;This is item 1&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="class1" id="2"&gt;
              &lt;div class="sortHandle"&gt;&lt;/div&gt;
               &lt;href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R2"&gt;lock&lt;/a&gt;
              &lt;p&gt;This is item 2&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="class1" id="3"&gt;
              &lt;div class="sortHandle"&gt;&lt;/div&gt;
             &lt;href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R3"&gt;lock&lt;/a&gt;
              &lt;p&gt;This is item 3&lt;/p&gt;
       &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>js:</p>

<pre><code>$(function() {
   $("#sortable").sortable({
    items: '.class1',
    handle: '.sortHandle',
    cursor: 'move',
    start: function(e,ui) {
     el = e.target;
     startPos = ui.item.prevAll().length+1;
    },
     update: function(event, ui) {
     data = $('.class1').sortable('toArray');
     newPos = ui.item.prevAll().length+1;
     alert("position: "+startPos+"; newposition: "+newPos);
    }
   }).disableSelection();
  });
</code></pre>
