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 回答