title: x editable value change on dynamically not working
body: <p>i have using x editable file for by bootstrap application. now i have a situation where i need to change the value on my span by a button click.value is changing but if i am click on that x editable span,previous value is populated on the text box
   this is my sample code </p>
  
  <p>
  </p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Patient portal&lt;/title&gt;
               &lt;meta name="description" content="3 styles with inline editable feature" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /&gt;
              &lt;link rel="stylesheet" href="assets/css/bootstrap-editable.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body &gt;&lt;!-- #section:basics/navbar.layout --&gt;
         &lt;div&gt;
                &lt;span class="editable" id="city"&gt; intial value &lt;/span&gt;
                &lt;button  id="change"&gt;change value&lt;/button&gt;
  
         &lt;/div&gt;
              &lt;script type="text/javascript"&gt;
          window.jQuery || document.write("&lt;script src='assets/js/jquery.min.js'&gt;"+"&lt;"+"/script&gt;");
      &lt;/script&gt;
      &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
              &lt;script src="assets/js/x-editable/bootstrap-editable.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/x-editable/ace-editable.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- inline scripts related to this page --&gt;
  
      &lt;script type="text/javascript"&gt;
    $( document ).ready(function() {
         $.fn.editable.defaults.mode = 'inline';
         $.fn.editableform.loading = "&lt;div class='editableform-loading'&gt;&lt;i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'&gt;&lt;/i&gt;&lt;/div&gt;";
     $.fn.editableform.buttons = '&lt;button type="submit" class="btn btn-info editable-submit"&gt;&lt;i class="ace-icon fa fa-check"&gt;&lt;/i&gt;&lt;/button&gt;'+
                                          '&lt;button type="button" class="btn editable-cancel"&gt;&lt;i class="ace-icon fa fa-times"&gt;&lt;/i&gt;&lt;/button&gt;'; 
       $('#city').editable({
              type: 'text',
              name: 'FirstName',
              title: 'enter First Name',
              validate: function(value) {
                  if($.trim(value) == '') 
                    return ' First Name is required';
                  else if($.trim(value).length&gt;30)
                    return 'Only 50 charateres are allowed';
                }
  
          });
  
  
  
          $('#change').click(function(){
            $('#city').text("changed value")  
          });
  
      })
  
     &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>here city span is populated with 'intial value' first and while i am click on that span a text box will appear with value 'intial value' ,then if i click on change button span value will be changed to 'changed value'.then if i click on the span again text box is showing the previous value 'intial value' .how can i fix this issue any help will be appreciated </p>
  
  <p>this is jfiddle  link  <a href="http://jsfiddle.net/3KkZd/182/" rel="noreferrer">jfiddle</a></p>