Can't edit the newly added rows
Question
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() ? How to do so?
2 answers
solution1
1 ACCPTED 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. 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:
$(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>
solution2
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. so when you add a new element you must manually assign the method to its edit button.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
can't sort newly added rows to html table
jquery each() doesn't loop through newly added table rows
Datatable pagination on newly added rows
Javascript: Can't find newly added form inputs in the DOM
in Javascript Dom ,the newly added element can't be selected?
jQuery Datatable can't edit newly made row
Knockout: Can't edit item that was added to UI
Edit not working for newly added data - knockout
How to edit a newly added list from JSON?
JQuery : using bind for newly added table rows
Related Tags