title: Bootstrap Table with X-editable elements, problems while sorting
body: <p>I have a problem with Bootstrap Table and X-editable library for in-place editing.
  I created a simple example to describe it. <br></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;table id="table" class="table" data-toggle="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="col-xs-1" data-field="name" data-sortable="true"&gt;Name&lt;/th&gt;
              &lt;th class="col-xs-1" data-field="value" data-sortable="true"&gt;Value&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 1&lt;/td&gt;
              &lt;td&gt;
                  &lt;span id="note1" data-toggle="#edit1"&gt;value 1&lt;/span&gt;
                  &lt;a href="#" id="edit1"&gt;&lt;span&gt;edit&lt;/span&gt;&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 2&lt;/td&gt;
              &lt;td&gt;
                  &lt;span id="note2" data-toggle="#edit2"&gt;value 2&lt;/span&gt;
                  &lt;a href="#" id="edit2"&gt;&lt;span&gt;edit&lt;/span&gt;&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;   
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h2>JavaScript</h2>
  
  <pre><code>$('#note1').editable({
      type: 'text',
      url: '/post',    
      pk: 1,    
      title: 'Enter value1', 
      ajaxOptions: {
          dataType: 'json'
      },
      toggle: 'manual',
  });
  
  $('#note2').editable({
      type: 'text',
      url: '/post',    
      pk: 1,    
      title: 'Enter value2', 
      ajaxOptions: {
          dataType: 'json'
      },    
      toggle: 'manual',
  });
  
  $('#edit1').click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      $('#note1').editable('toggle');
  });
  
  $('#edit2').click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      $('#note2').editable('toggle');
  });
  
  //ajax emulation
  $.mockjax({
      url: '/post',
      responseTime: 200,
      response: function(settings) {
          if(settings.data.value) {
              this.responseText = '{"success": true}';
          } else {
              this.responseText = '{"success": false, "msg": "required"}';
          }
      }
  }); 
  </code></pre>
  
  <p>You can also find it here:
  <a href="http://jsfiddle.net/xBB5x/9498/" rel="nofollow">http://jsfiddle.net/xBB5x/9498/</a> <br></p>
  
  <p><strong>So, there are two problems with it:</strong> <br>
  1) I can edit my items and everything is ok with it until I use Bootstrap Table column sortings. Once I sort something - my editable elements become uneditable.<br>
  2) If I change old values to any new values and then sort any column - I lose my new values and the old values appear back.</p>
  
  <p>Any ideas? Thank you!</p>