Apply x-editable for new appended td's

Question

I have a table with fields where I can add dynamically table data via JQuery. The problem is the elements I add aren't having the properties I've set for that group of td's until I reload the entire page and I don't know what has to be triggered to take action also for new ones.

here is my code:

#js file
function add_task() {
task_name = $("#task-name").val();
due_date = $("#task-due_date").val();
var new_task = $.ajax({
    url: "/add_task/",
    data: "task="+task_name+"&due_date="+due_date,
    success: function(task_id){
        get_task(task_id);
    }
});
}

function get_task(task_id) {
$.ajax({
    url: "/get_task/"+task_id+"/", //get the html from single_task.html

    success: function(result){
        $('#container').append(result);
        $('#task-'+task_id).fadeIn(500);
    }

});

}

#single_task.html
<tr id="task-{{task.id}}">
<td><div id="task">
        <a href="#" data-type="text" data-pk="{{task.id}}" data-     url="/update_task/{{task.id}}/" data-title="Enter task">{{ task.task }}</a>
    </div></td> 
<td>{{ task.initialized_at|age }}</td>
<td>{{ task.due_date }}</td>
<td>{{ task.done }}</td>
<td><button onclick="delete_task('{{task.id}}');" class="btn"> X </button></td>

#index.html //place where to load everything
    <table id="container" class="table table-bordered">

    <th style="width:200px;">task</th>
    <th style="width:60px;">started</th>
    <th style="width:80px;">due date</th>
    <th style="width:50px;">status</th>
    <th style="width:20px;">action</th>

    {% for task in tasks %}

        <tr id="task-{{task.id}}">
            <td>
                <div id="task"><a href="#" data-type="text" data-    pk="{{task.id}}" data-url="{% url 'todo:update_task' task.id %}" data-title="Enter task">{{     task.task }}</a></div>
            </td>   
            <td>{{ task.initialized_at|age }}</td>
            <td>
                <div id="due_date"><a href="#" data-type="date"     data-pk="{{task.id}}" data-url="{% url 'todo:update_task' task.id %}" data-title="New date">    {{ task.due_date }}</a></div>
            </td>
            <td>{{ task.done }}</td>
            <td><button onclick="delete_task('{{task.id}}');" class="btn         btn-link"> X </button></td>
        </tr>

    {% endfor %}

   </table>

Your help would be very much appreciated :)

Thank you in advance!

Answer 1

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>