jquery - 对新附加的 td 应用 x-editable

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>