Wie fügt man mit jQuery einen Bestätigungsdialog zu vielen verschiedenen Tasten gleichzeitig hinzu?

Question

Sagen wir, ich HTML haben ...

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

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

Jetzt möchte ich den Benutzer mit einem Bestätigungsdialogfeld auffordern, bevor alle diese Dinge entfernt werden. Gibt es eine Möglichkeit, dies zu tun, ohne confirm in jedem einzelnen Klick-Handler hinzuzufügen und aufzurufen?

ich in meinem Kopf etwas haben eine einzige Klasse zu all den verschiedenen Tasten wie das Hinzufügen (wir btn-remove sagen) und dann einen einzigen Klick-Handler hinzugefügt, die wie folgt aussehen könnte:

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

können Sie verschiedene Click-Handler für verschiedene Schaltfläche schreiben und rufen gemeinsam Prüffunktion funktionieren Sie anrufen möchten einen Parameter hat und auf OK klicken Sie rufen Sie diese Rückruffunktion auf.

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

Dies ist auch ein Weg. So müssen Sie Ihren Code nicht viel ändern.

Answer 2

Ich schlage vor, Sie verwenden data-* es hier in Ihrem Fall:

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

Jetzt in Ihrem js Code Sie können dies tun:

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]; 
    } 
}); 

Hier

Answer 3

ist ein Beispiel dafür, wie ich es tun würde:

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