新しい追加tdのx編集を適用

Question

私はJQuery経由でテーブルのデータを動的に追加できるフィールドを持つテーブルを持っています。問題は、私が追加した要素は、ページ全体をリロードするまでは私がそのグループのtdに設定したプロパティを持たず、新しいものに対しても何が起こるべきかわからないということです。ここ

は私のコードです：

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

あなたのヘルプは非常に高く評価されるだろう:)

を事前にありがとうございます！

Answer 1

x編集可能なまたは他の多くのJQueryプラグインが新しくレンダリングされた要素に作用しない理由は、既にレンダリングされた要素にのみ適用されるためです。解決策は、関数をリロードし、新しいリスナーを追加することです。

この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(); 

を確認してくださいここでは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>