1次點擊後出現灰色按鈕 - HTML/CSS/JS

Question

爲什麼下面不起作用？我想要它，所以當點擊一個按鈕時，JS仍然執行，但是按鈕然後被禁用並且「變灰」，所以不能再次點擊。

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

你實際上並沒有重新AJAX調用命令後，啓動按鈕，有兩個有用的事件來處理Ajax調用的回調結果：

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>