5

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>

あなたの助けは非常に高く評価されます:)

前もって感謝します！

4

1 に答える 1

14

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

このフィドルをチェックしてください

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>
于 2013-08-29T03:17:18.857 に答える