我正在使用 Bootstrap 框架构建网站。
我在加载自定义 CSS 文件时遇到问题。在此文件中，我覆盖了一些元素，例如导航栏颜色。当用户提交表单时，我对 php 文件进行了 ajax 调用，该文件的响应应该加载到模态消息中。
为了使我的自定义 CSS 生效，我必须在 Bootstrap CSS 文件之后加载它。但是，当我这样做时，我的 jQuery 似乎失败了，并且我对 php 文件的 ajax 调用不起作用。当我的 CSS 文件在 Bootstrap CSS 文件之后加载时，我的模态消息打开但为空白，就好像我的 jQuery 从未通过过一样。
我怀疑这与 jQuery 和 Bootstrap 的加载顺序或与我正在使用的每个版本不兼容有关。
请指教。
我在下面包含了一个代码片段。
<!DOCTYPE html>
<html>
<head>
<title>Activate</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel='stylesheet' href='style.css'/>
<script src="http://code.jquery.com/jquery-latest.min.js" ></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
function chk(){
var opus_Code=document.getElementById('opus_Code').value;
var session_Token=document.getElementById('session_Token').value;
//var session_Token=<?php echo $session_Token; ?>;
var dataString='opus_Code='+ opus_Code + '&session_Token=' + session_Token;
$.ajax({
type:"post",
url: "redeem_Opus.php",
data:dataString,
cache:false,
success:function(html){
var response = jQuery.parseJSON(html);
$('#msg').html(html);
$('#msg').html(response.response_Message);
if(response.response_Status == "200"){
window.location.href = "activation_Complete_Page.php";
}else{
$('#msg').html(response.response_Message);
$('#login_Redirect_Button').html("<button type='button' class='btn btn-default' data-dismiss='modal'>Okay</button>");
}
}
});
return false;
}
function logout_Chk(){
$('#msg').html("Are you sure you want to log out?");
$('#login_Redirect_Button').html("<button type='button' class='btn btn-default' data-dismiss='modal'>Okay</button>");
}
</script>
</head>
<!--Further down in my script-->
<!-- Modal -->
<div class='modal fade' id='myModal' role='dialog'>
<div class='modal-dialog modal-sm'>
<!-- Modal content-->
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h4 class='modal-title'>Please note:</h4>
</div>
<div class='modal-body' id='msg'>
<p>Some text in the modal.</p>
</div>
<div class='modal-footer'>
<div id="login_Redirect_Button"></div>
</div>
</div>
</div>
</div>
<!--end Modal-->
更新
我目前的解决方法是在 Bootstrap css 之前加载我的自定义 css，然后在 html 页面中添加我的样式，如下所示:
<style>
.navbar-custom {
background-color: rgba(40,40,40,0.8);
}
</style>
但是，如果我从我的 css 文件中执行此操作，则不会应用相同的样式，除非我的 css 文件是在 BS css 文件之后加载的，这会中断我的 jQuery 调用。 :(
更新 2 正如评论者所建议的那样，问题出在我的自定义 CSS 文件中。一旦我把那些坏苹果拿出来，问题就解决了。不要从网络上复制/粘贴，除非你知道它的作用:)
最佳答案
CSS 不能与您的 Javascript 交互，只能与您的 HTML 交互。
因此，如果您将样式应用到页面，并且这似乎导致了问题，请尝试找出 CSS 中的错误所在。您可以非常确定 JS 没有改变它的行为。
旁注 您想知道如何记录您的 Ajax 调用:
$.ajax({
url: "test.html"
}).done(function(result) {
console.log(result); <---
});
然后在浏览器中右击，选择inspect element，进入控制台。你可以在那里看到输出。
关于jQuery BootStrap 加载顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37507014/