How to add confirmation dialog to several different buttons at the same time using jQuery?

Question

Say I have this HTML ...

<button class="btn-remove-this">Remove this</button> <button class="btn-remove-that">Remove that</button> <button class="btn-remove-some-other-thing">Remove some other thing</button> <!-- and many more 'Remove ...' buttons --> 

... and this javascript.

 $(function() { $('.btn-remove-this').click(function() { functionWhichRemovesThis(); } $('.btn-remove-that').click(function() { functionWhichRemovesThat(); } $('.btn-remove-some-other-thing').click(function() { functionWhichRemovesSomeOtherThing(); } // and many more click handlers }); 

Now I would like to ask the user for a confirmation dialog before deleting all these things. Is there a way to do this without adding and calling confirm inside each click handler?

I have in mind something like adding one class to all the different buttons (say btn-remove ) and then adding one click handler, which might look like this:

 $('.btn-remove').click(function() { if (confirm('Are you sure you want to remove this?')) { // execute the body of the "more specific" click handler } else { // prevent the body of the "more specific" click handler from executing } } 

Answer 1

You can write another click handler for different buttons and call the general check function, the function you want to call has a parameter, and when you click OK, you can call this callback function.

  $('.btn-remove-this').click(function() { check(functionWhichRemovesThis); }); $('.btn-remove-that').click(function() { check(functionWhichRemovesThat); }); $('.btn-remove-some-other-thing').click(function() { check(functionWhichRemovesSomeOtherThing); }); function check(callback){ if (confirm('Are you sure you want to remove this?')) { callback(); } else { // prevent the body of the "more specific" click handler from executing } } 

It is also a way. So you don’t have to change the code much.

Answer 2

I suggest you use data-* for this here in your case:

 <button class="btn-remove" data-func="functionWhichRemovesThis">Remove this</button> <button class="btn-remove" data-func="functionWhichRemovesThat">Remove that</button> <button class="btn-remove" data-func="functionWhichRemovesSomeOtherThing">Remove some other thing</button> 

Now in your js code you can do this:

 var removeUtil = { functionWhichRemovesThis : function(){}, functionWhichRemovesThat : function(){}, functionWhichRemovesSomeOtherThing : function(){} }; $('.btn-remove').click(function() { if (confirm('Are you sure you want to remove this?')) { var removeIt = $(this).data('func'); removeUtil[removeIt]; } }); 

Answer 3

Here is an example of how I will do this:

 <button class="btn-remove btn-remove-some-other-thing">Remove something</button> <button data-callback="App.remove.that" data-confirmText="Remove that?" class="btn-remove btn-remove-some-other-thing">Remove that</button> <button data-callback="App.remove.this" data-confirmText="Remove this?" class="btn-remove btn-remove-some-other-thing">Remove this</button> <script type="text/javascript"> var App = {}; App.remove = {}; // create an object to define different callbacks, outside of document(ready) so you an access it anywhere else you want. App.remove['this'] = { 'yes': function () { console.log('this.yes') }, 'no': function () { console.log('this.no') } }; App.remove['that'] = { 'yes': function () { console.log('that.yes') }, 'no': function () { console.log('that.no') } }; $(document).ready(function () { $('.btn-remove').click(function () { var callback = {}; if (typeof $(this).attr('data-callback') !== 'undefined') { // get the callback object of current button. callback = $(this).attr('data-callback').split('.').reduce(function (obj, i) { return App.remove[i]; }, App.remove); } var confirmText = 'Are you sure you want to remove this?'; if (typeof $(this).attr('data-confirmText') !== 'undefined') { // set alternate text if needed confirmText = $(this).attr('data-confirmText'); } if (confirm(confirmText)) { if (callback.hasOwnProperty('yes')) { // do callback if property exists in callback object callback.yes(); } } else { if (callback.hasOwnProperty('no')) { // do callback if property exists in callback object callback.no(); } } }); }); </script>