The reason why x-editable or many other JQuery plugins do not act on newly rendered elements is because they apply only on the already rendered elements. The solution is to reload the function, and add new listeners.
Please check this Fiddle
function returnAccess() {
// setup editable for new elements created in the DOM
$('#users a').editable({
type: 'text',
name: 'username',
url: '/post',
title: 'Enter username' });
//ajax emulation
$.mockjax({url: '/post', responseTime: 200 });
}
//button trigger
$("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();
});
// trigger function in the beginning
returnAccess();
Here is the HTML
<button id="something">Add new</button>
<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>