大佬教程收集整理的这篇文章主要介绍了jquery – 对新添加的td应用x-editable,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的代码:
#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>
非常感谢你的帮助:)
先感谢您!
请查看此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>
以上是大佬教程为你收集整理的jquery – 对新添加的td应用x-editable全部内容,希望文章能够帮你解决jquery – 对新添加的td应用x-editable所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。