Graue Schaltfläche nach 1 Klick - HTML/CSS/JS

Question

Warum funktioniert das unten nicht? Ich will es so, wenn der Knopf geklickt wird, wird der JS immer noch ausgeführt, aber der Knopf ist dann deaktiviert und 'ausgegraut', so dass man nicht mehr darauf klicken kann.

$(document).ready(function() { 
 
    $('#contact-submit').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var btn = $(e.target); 
 
    btn.attr("disabled", "disabled"); // disable button 
 
    var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
 
    var text = 'xxxxxxxxxxxxxxxxxxxxxxxxx' 
 
    $.ajax({ 
 
     data: 'payload=' + JSON.stringify({ 
 
     "text": text 
 
     }), 
 
     dataType: 'json', 
 
     processData: false, 
 
     type: 'POST', 
 
     url: url 
 
    }); 
 
    }); 
 
});

#contact button[type="submit"] { 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    background: #4CAF50; 
 
    color: #FFF; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
} 
 

 
#contact button:disabled[type="submit"] { 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    background: #ffffff; 
 
    color: #FFF; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Call</button>

Answer 1

Sie eigentlich nicht erneut Taste aktivieren, nachdem Ajax-Befehl aufrufen, gibt es zwei nützliche Ereignisse Rückruf Ergebnis von Ajax-Aufruf zu behandeln:

1. success
2. error

$(document).ready(function() { 
 
    $('#contact-submit').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var btn = $(e.target); 
 
    btn.attr("disabled", "disabled"); // disable button 
 
    var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
 
    var text = 'xxxxxxxxxxxxxxxxxxxxxxxxx' 
 
    $.ajax({ 
 
     data: 'payload=' + JSON.stringify({ 
 
     "text": text 
 
     }), 
 
     dataType: 'json', 
 
     processData: false, 
 
     type: 'POST', 
 
     url: url, 
 
     success: function(data) { 
 
     console.log("OK") 
 
     btn.removeAttr("disabled"); 
 
     }, 
 
     error: function(data) { 
 
     btn.removeAttr("disabled"); 
 
     } 
 
    }); 
 
    }); 
 
});

#contact button[type="submit"] { 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    background: #4CAF50; 
 
    color: #FFF; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
} 
 

 
#contact button:disabled[type="submit"] { 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    background: #ffffff; 
 
    color: #FFF; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Call</button>