为新附加的 td 应用 x-editable

Posted 2023-02-24

【中文标题】为新附加的 td 应用 x-editable

【英文标题】：Apply x-editable for new appended td's

【发布时间】：2013-07-25 18:11:43

【问题描述】：

我有一个带有字段的表，我可以通过 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>

非常感谢您的帮助:)

提前谢谢你！

【参考方案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>    

【讨论】：

@jabez 你能解释一下吗？

我已将我的 x 可编辑代码放在一个函数中。然后在添加动态行之后，使用您在演示中放置的这个示例简单地取消投标。 $("#users a").unbind();然后调用要绑定的函数。谢谢你的例子。

它适用于动态添加的第一个元素，但不适用于第二个。