无法编辑新添加的行
[英]Can't edit the newly added rows
问题描述
I cannot edit the rows that are newly added.
我无法编辑新添加的行。 I have included the class in the newly added row.我已将该类包含在新添加的行中。 But when I click the edit button in the newly added row, its not working.但是当我单击新添加的行中的编辑按钮时，它不起作用。 Also the edit button is not working once I edit the row.一旦我编辑该行，编辑按钮也不起作用。 I can't edit the same row two times.我不能两次编辑同一行。 The function is not calling when I click the button edit.当我单击按钮编辑时，该函数没有调用。 Can u guys help me out?你们能帮帮我吗？
Following is the reproduction of my issue -以下是我的问题的再现 -
$(document).ready(function(){ $('#add').on('click',()=>{ $("#popup").dialog({ width:400, modal:true, resizeable:false, buttons:{ "Submit":function(){ var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+ $('#name').val()+'</td><td>' +$("#age").val()+ '</td><td>'+ '<button type="button" class="edit" >Edit</button>'+ '</td></tr>'; $('#table tbody').append(addrow); $('.add-input').val(''); $(this).dialog("close"); } } }); }) $("#delete").on("click", function () { $('table tr').has('input:checked').remove(); }) $('#deleteall').on('click',function(){ $('tbody tr').remove(); }) $('.edit').on('click',(event)=>{ $("#popup").dialog({ width:400, modal:true, resizeable:false, buttons:{ "Submit":function(){ var name = '<tr><td><input type="checkbox" class="select"></td><td>'+ $('#name').val()+'</td><td>' +$("#age").val()+ '</td><td>'+ '<button type="button" class="edit">Edit</button>'+ '</td></tr>'; $(event.currentTarget).parents('tr').replaceWith(name); console.log($('tr')); $('.add-input').val(''); $(this).dialog("close"); } } }) }) })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>table edit</title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div class="table-wrap"> <table id="table" border="1"> <thead> <tr> <th>Select</th> <th>Name</th> <th>Age</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="select"></td> <td>Sakthi</td> <td>20</td> <td><button type="button" class="edit" >Edit</button></td> </tr> <tr> <td><input type="checkbox" class="select"></td> <td>Prabhu</td> <td>21</td> <td><button type="button" class="edit" >Edit</button></td> </tr> </tbody> </table> </div> <div class="op"> <button type="button" class="mod" id="add">Add</button> <button type="button" class="mod" id="delete">Delete</button> <button type="button" class="mod" id="deleteall">Delete All</button> </div> <div class="popup" id="popup" style="display:none;"> <input type="text" placeholder="Name" class="add-input" id="name"> <input type="number" placeholder="Age" class="add-input" id="age"> </div> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript" src="tab-mod.js"></script> </body> </html>
Can I do without using onclick() ?我可以不使用 onclick() 吗？ How to do so?怎么做？
2 个解决方案
解决方案1
1 已采纳 2019-08-27 12:22:15
The problem is that when you load the onclick listeners for .edit there you have only two buttons, and the script don't know news rows.问题是，当您加载.edit的 onclick 侦听.edit ，您只有两个按钮，并且脚本不知道新闻行。 If you will add dynamically rows it need another context to can execute it.如果您将动态添加行，则需要另一个上下文才能执行它。 Just replace this:只需替换这个：
$('.edit').on('click',(event)=>{...})
by经过
$("tbody").on("click", ".edit", (event) =>{...})
Update : you could take name & age when you open the edit box like this:更新：当您打开这样的编辑框时，您可以使用name和age ：
$(document).ready(function(){ $('#add').on('click',()=>{ $("#popup").dialog({ width:400, modal:true, resizeable:false, buttons:{ "Submit":function(){ var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+ $('#name').val()+'</td><td>' +$("#age").val()+ '</td><td>'+ '<button type="button" class="edit" >Edit</button>'+ '</td></tr>'; $('#table tbody').append(addrow); $('.add-input').val(''); $(this).dialog("close"); } } }); }) $("#delete").on("click", function () { $('table tr').has('input:checked').remove(); }) $('#deleteall').on('click',function(){ $('tbody tr').remove(); }) $("tbody").on("click", ".edit", event => { let $btnParentSiblings = $(event.currentTarget).parent().siblings('td') let $name = $btnParentSiblings[1]; let $age = $btnParentSiblings[2]; $("#popup > #name").val($($name).html()); $("#popup > #age").val($($age).html()); $("#popup").dialog({ width:400, modal:true, resizeable:false, buttons:{ "Submit":function(){ var name = '<tr><td><input type="checkbox" class="select"></td><td>'+ $('#name').val()+'</td><td>' +$("#age").val()+ '</td><td>'+ '<button type="button" class="edit">Edit</button>'+ '</td></tr>'; $(event.currentTarget).parents('tr').replaceWith(name); console.log($('tr')); $('.add-input').val(''); $(this).dialog("close"); } } }) }) })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>table edit</title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div class="table-wrap"> <table id="table" border="1"> <thead> <tr> <th>Select</th> <th>Name</th> <th>Age</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="select"></td> <td>Sakthi</td> <td>20</td> <td><button type="button" class="edit" >Edit</button></td> </tr> <tr> <td><input type="checkbox" class="select"></td> <td>Prabhu</td> <td>21</td> <td><button type="button" class="edit" >Edit</button></td> </tr> </tbody> </table> </div> <div class="op"> <button type="button" class="mod" id="add">Add</button> <button type="button" class="mod" id="delete">Delete</button> <button type="button" class="mod" id="deleteall">Delete All</button> </div> <div class="popup" id="popup" style="display:none;"> <input type="text" placeholder="Name" class="add-input" id="name"> <input type="number" placeholder="Age" class="add-input" id="age"> </div> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript" src="tab-mod.js"></script> </body> </html>
解决方案2
0 2019-08-27 11:46:23
because your JavaScript code is running once the document is fully loaded and at that moment searches for all elements with edit class and assign their click event the editing method.因为一旦文档完全加载，您的 JavaScript 代码就会运行，此时会搜索所有具有edit类的元素并将其单击事件分配为编辑方法。 so when you add a new element you must manually assign the method to its edit button.所以当你添加一个新元素时，你必须手动将方法分配给它的编辑按钮。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.