title: jQuery Sortable updated data not being serialized
body: <p>I am using the <a href="http://johnny.github.io/jquery-sortable" rel="nofollow">jQuery Sortable plugin</a>.</p>
  
  <p>Looking at the basic example on how to serialize the data I have the below code.</p>
  
  <pre><code>    &lt;div class='span4'&gt;
          &lt;ol class='serialization vertical'&gt;
              &lt;li data-id='1' data-name='Item 1' data-status='1'&gt;Item 1 &lt;span class="status"&gt;toggle&lt;/span&gt;&lt;/li&gt;
              &lt;li data-id='2' data-name='Item 2' data-status='1'&gt;Item 2 &lt;span class="status"&gt;toggle&lt;/span&gt;&lt;/li&gt;
              &lt;li data-id='3' data-name='Item 3' data-status='1'&gt;Item 3 &lt;span class="status"&gt;toggle&lt;/span&gt;&lt;/li&gt;
              &lt;li data-id='4' data-name='Item 4' data-status='1'&gt;Item 4 &lt;span class="status"&gt;toggle&lt;/span&gt;&lt;/li&gt;
              &lt;li data-id='5' data-name='Item 5' data-status='1'&gt;Item 5 &lt;span class="status"&gt;toggle&lt;/span&gt;&lt;/li&gt;
              &lt;li data-id='6' data-name='Item 6' data-status='1'&gt;Item 6 &lt;span class="status"&gt;toggle&lt;/span&gt;&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/div&gt;
  
      var group = $("ol.serialization").sortable({
        group: 'serialization',
        delay: 500,
        onDrop: function (item, container, _super) {
          var data = group.sortable("serialize").get();
          var jsonString = JSON.stringify(data, null, ' ');
      console.log(jsonString);
          $('#serialize_output2').text(jsonString);
          _super(item, container)
        }
      });
  </code></pre>
  
  <p>I want to allow the user to toggle the status of each item so I have also added in </p>
  
  <pre><code>    jQuery(document).on("click", ".status", function (event) {
          var status = $(this).closest("li").attr("data-status");
          if(status == 1) {
              $(this).closest("li").attr( 'data-status','0');
          }
          else {
              $(this).closest("li").attr( 'data-status','1');
          }
      });
  </code></pre>
  
  <p>If I click toggle before dragging and dropping the list item the console.log will return the correct status (1 or 0).</p>
  
  <p>However after I have dragged and dropped, if I try and click to update the status then drag and drop again the console.log returns the correct order of my list but not the most up to date status.</p>
  
  <p>What do I need to do here to ensure the serialized data reflects the value of the data attribute at the time of the drop?</p>
  
  <p><a href="http://jsfiddle.net/W6SHt/" rel="nofollow">see this fiddle.</a></p>