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>