Come aggiungere un dialogo di conferma a molti pulsanti diversi contemporaneamente con jQuery?

Question

Diciamo che ho questo 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 --> 

... e questo 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 
}); 

Ora desidero chiedere all'utente un dialogo di conferma prima di rimuovere tutte quelle cose. C'è un modo per farlo senza aggiungere e chiamare confirm all'interno di ogni singolo click handler?

che ho in mente qualcosa come l'aggiunta di una singola classe a tutti i vari pulsanti (diciamo btn-remove) e poi l'aggiunta di un singolo gestore di clic che potrebbe assomigliare a questo:

$('.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

Si può scrivere di diverso gestore clicca per pulsante diverso e chiamare la funzione di controllo comune sarà funzione che si desidera chiamare è un parametro e su ok cliccare su Potete chiama quella funzione di callback.

$('.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 
    } 
    } 

Questo è anche un modo. In modo che non devi modificare molto il tuo codice.

Answer 2

vi consiglio di utilizzare data-* perché qui nel vostro caso:

<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> 

Ora nel codice js si può fare questo:

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

Ecco un esempio di come lo farei:

<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>