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-editable或许多其他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>

对新添加的td应用x-editable

1 个答案: