anwenden x editierbare für neue hängten TDs

Question

Ich habe eine Tabelle mit Feldern, wo ich dynamisch Tabellendaten über JQuery hinzufügen kann. Das Problem ist, dass die Elemente, die ich hinzufüge, nicht die Eigenschaften haben, die ich für diese Gruppe von TDs eingestellt habe, bis ich die gesamte Seite neu lade und ich nicht weiß, was ausgelöst werden muss, um auch für neue Maßnahmen zu ergreifen.

hier ist mein 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> 

Ihre Hilfe sehr geschätzt würde :)

Vielen Dank im Voraus!

Answer 1

Der Grund, warum x bearbeitbaren oder viele andere JQuery Plugins wirken nicht auf neu gerenderten Elemente ist, weil sie nur auf die bereits erbrachten Elemente gelten. Die Lösung besteht darin, die Funktion neu zu laden und neue Listener hinzuzufügen.

Bitte überprüfen Sie diese 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(); 

Hier ist der 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>