Applica x-modificabile per i nuovi td aggiunti

Question

Ho una tabella con campi in cui posso aggiungere dinamicamente i dati della tabella tramite JQuery. Il problema è che gli elementi che aggiungo non hanno le proprietà che ho impostato per quel gruppo di td fino a quando non ricarico l'intera pagina e non so cosa debba essere attivato per agire anche per quelli nuovi.

Ecco il mio codice:

#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> 

Il vostro aiuto sarebbe molto apprezzato :)

Grazie in anticipo!

Answer 1

Il motivo per cui x-editable o molti altri plug-in JQuery non agiscono sugli elementi appena sottoposti a rendering è perché si applicano solo agli elementi già visualizzati. La soluzione è di ricaricare la funzione e aggiungere nuovi listener.

Si prega di controllare questo 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(); 

Ecco l'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>