DynamicUpates

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<button>Add new</button>
<div style="margin: 150px">
    <table id="users" class="table table-bordered table-condensed">
        <tr><th>#</th><th>name</th><th>age</th></tr>
        <tr>
            <td>1</td>
            <td><a href="#" data-pk="1">Mike</a></td>
            <td>21</td>       
        </tr>
        
        <tr>
            <td>2</td>
            <td><a href="#" data-pk="2">John</a></td>
            <td>28</td>       
        </tr>        
        
        <tr>
            <td>3</td>
            <td><a href="#" data-pk="3">Mary</a></td>
            <td>24</td>       
        </tr>        
        
    </table>    
</div>

JavaScript

function returnAccess(randomID)
{
// remove existing listeners 
$("#users"+randomID+" a").unbind();

// setup editable for new elements created in the DOM    
$('#users'+randomID+' a').editable({
    type: 'text',
    name: 'username',
    url: '/post',
    title: 'Enter username'
});

//ajax emulation
$.mockjax({
    url: '/post',
    responseTime: 200
}); 
}

$("button").click(function() 
{
    	
    randomID = Math.floor(Math.random()*1000001);
    var col = "<tr><td colspan='3'><a href='#' data-pk='"+randomID+"'>Mike</a></td></tr>"; 
	$( "#users" ).append(col);		
    returnAccess(randomID);	
    
});



// trigger function in the begining 
returnAccess(randomID);