jQuery BootStrap 加载顺序答案

【问题标题】：jQuery BootStrap load orderjQuery BootStrap 加载顺序
【发布时间】：2016-09-27 04:22:59
【问题描述】：

我正在使用 Bootstrap 框架来构建网站。

我在加载自定义 CSS 文件时遇到问题。在这个文件中，我覆盖了一些元素，例如导航栏颜色。当用户提交表单时，我对 php 文件进行 ajax 调用，并且该文件的响应应该被加载到模式消息中。

为了让我的自定义 CSS 生效，我必须在 Bootstrap CSS 文件之后加载它。但是，当我这样做时，我的 jQuery 似乎失败了，并且我对我的 php 文件的 ajax 调用不起作用。当我的 CSS 文件在 Bootstrap CSS 文件之后加载时，我的模式消息打开但为空白，就好像我的 jQuery 从未通过一样。

我怀疑这与加载 jQuery 和 Bootstrap 的顺序或与我使用的每个版本不兼容有关。

请指教。

我在下面包含了一个代码 sn-p。

<!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'>&times;</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 文件中。一旦我把那些坏苹果拿出来，问题就解决了。除非您知道它的作用，否则不要从网络复制/粘贴 :)

【问题讨论】：

如果您记录，Ajax 调用是否返回相同的结果？那么很可能你的css坏了。否则，你的css应该不会伤害到JS，你能提供一个工作的sn-p吗？
如何记录？而且，我应该提供什么sn-p；我的CSS？
@randy 你是对的！！谢谢您的意见。问题出在我的自定义 CSS 文件中。一旦我把那些坏苹果拿出来，问题就解决了。给自己的教训，除非您知道它的作用，否则不要从网络复制/粘贴：)
只是一个注释；最好在引导 css 之后添加您的自定义 css，以便您覆盖它。否则可能会出现副作用。

标签： jquery css twitter-bootstrap-3

【解决方案1】：

CSS 不能与您的 Javascript 交互，只能与您的 HTML 交互。

因此，如果您将样式应用于页面，并且看起来这会导致问题，请尝试找出错误在您的 CSS 中的位置。你可以很确定 JS 没有改变它的行为。

旁注您想知道如何记录您的 Ajax 调用：

$.ajax({
  url: "test.html"
}).done(function(result) {
  console.log(result);      <---
});

然后在浏览器中右击，选择inspect element，进入控制台。你可以在那里看到输出。

【讨论】：

哦，我明白了。谢谢你的澄清。很高兴知道 CSS 和 JS 不交互，不能相互干扰。日志记录对于将来的参考也很重要。谢谢！