AbutAtogabS
New Member
I have a table which has buttons when you hover on its rows. There is a delete button that calls a custom confirm dialog; this basically just accepts the callback function that it will perform when the delete is confirmed.The HTML is as follows:\[code\]<!DOCTYPE html><html> <head> <title>Home</title> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15873828/css/styles.css" /> </head> <body> <section> <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Doe, Jane</td> <td> <div> 25 <span class="actions"> <input type="button" value="http://stackoverflow.com/questions/15873828/Edit" class="btn-edit" /> <input type="button" value="http://stackoverflow.com/questions/15873828/Delete" class="btn-delete" /> </span> </div> </td> </tr> <tr> <td>Doe, John</td> <td> <div> 35 <span class="actions"> <input type="button" value="http://stackoverflow.com/questions/15873828/Edit" class="btn-edit" /> <input type="button" value="http://stackoverflow.com/questions/15873828/Delete" class="btn-delete" /> </span> </div> </td> </tr> <tr> <td>Smith, John</td> <td> <div> 30 <span class="actions"> <input type="button" value="http://stackoverflow.com/questions/15873828/Edit" class="btn-edit" /> <input type="button" value="http://stackoverflow.com/questions/15873828/Delete" class="btn-delete" /> </span> </div> </td> </tr> </tbody> </table> </section> <!-- popups --> <div id="confirm-delete" class="popup confirm-dialog"> <h3>Delete</h3> <div class="popup-content"> <p class="confirm-message">Are you sure you want to delete this item?</p> <div class="buttons"> <input id="btn-delete-confirm" type="button" class="button btn-confirm" value="http://stackoverflow.com/questions/15873828/Delete" /> <input id="btn-delete-cancel" type="button" class="button btn-close-popup" value="http://stackoverflow.com/questions/15873828/Cancel" /> </div> </div> </div> <script type="text/javascript" src="http://stackoverflow.com/questions/15873828/js/jquery.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15873828/js/home.js"></script> </body></html>\[/code\]JavaScript codes:\[code\]$(document).ready(function(){ var btnDelete = $('.btn-delete'); btnDelete.on('click', function(e){ var popUpId = 'confirm-delete', btn = $(e.currentTarget), item = $(e.currentTarget).closest('tr'), header = 'Delete Item', message = 'Are you sure you want to delete ' + item.find('.name').text() + '?'; customConfirm(popUpId, header, message, function(){ deleteItem(item); }); });});function customConfirm(id, header, message, callback){ var popUp = $('#' + id), btnConfirm = popUp.find('.btn-confirm'); popUp.find('h3').html(header); popUp.find('.confirm-message').html(message); popUp.append('<div class="mask"></div>'); popUp.show(); btnConfirm.on('click', {popUpId: id, callBack: callback}, confirmClick);}function confirmClick(e){ e.data.callBack(); closePopUp(e);}\[/code\]This works fine when I click on the delete button for one item and confirm its deletion. But when I click on the delete button of an item and then cancel it, click on another item's delete button and confirm, both items are deleted. It happens everytime I cancel the deletion of an item. So if I cancel deleting three items and confirm the deletion of the next item, four items will be deleted.Help on this would be greatly appreciated.Thank you 