jQuery引导加载顺序_Jquery_Css_Twitter Bootstrap 3

jQuery引导加载顺序

jquery css twitter-bootstrap-3

jQuery引导加载顺序,jquery,css,twitter-bootstrap-3,Jquery,Css,Twitter Bootstrap 3,我正在使用Bootstrap框架构建一个网站我在加载自定义CSS文件时遇到问题。在这个文件中，我覆盖了一些元素，如导航栏颜色。当用户提交表单时，我对一个php文件进行ajax调用，该文件的响应应该加载到一个模式消息中为了使我的自定义CSS生效，我必须在引导CSS文件之后加载它。然而，当我这样做时，我的jQuery似乎失败了，我对php文件的ajax调用也不起作用。当我的CSS文件在引导CSS文件之后加载时，我的模式消息将打开，但为空，就好像我的jQuery从未通过一样我怀疑这与jQuery

我正在使用Bootstrap框架构建一个网站

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

为了使我的自定义CSS生效，我必须在引导CSS文件之后加载它。然而，当我这样做时，我的jQuery似乎失败了，我对php文件的ajax调用也不起作用。当我的CSS文件在引导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'>&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-->


激活
函数chk（）{
var opus_Code=document.getElementById（'opus_Code'）。值；
var session_Token=document.getElementById（'session_Token'）。值；
//var会话_令牌=；
var dataString='opus_Code='+opus_Code+'&session_-Token='+session_-Token；
$.ajax({
类型：“post”，
url:“兑换Opus.php”，
数据：dataString，
cache:false，
成功：函数（html）{
var response=jQuery.parseJSON（html）；
$（'#msg'）.html（html）；
$（'#msg'）.html（response.response_消息）；
如果（response.response_Status==“200”）{
window.location.href=“activation\u Complete\u Page.php”；
}否则{
$（'#msg'）.html（response.response_消息）；
$（'login#u Redirect_Button'）.html（“OK”）；
}
}
});
返回false；
}
函数注销_Chk（）{
$（'#msg'）.html（“您确定要注销吗？”）；
$（'login#u Redirect_Button'）.html（“OK”）；
}
&时代；
请注意:
模态中的一些文本

更新

我当前的解决方法是在引导css之前加载我的自定义css，然后在html页面中添加我的样式，如下所示：

<style>
  .navbar-custom {
    background-color: rgba(40,40,40,0.8);
   }
</style>


.导航栏海关{
背景色：rgba（40,40,40,0.8）；
}

但如果我从css文件中执行此操作，则不会应用相同的样式，除非我的css文件在BS css文件之后加载，这会中断我的jQuery调用(

更新2

正如一位评论者所建议的，问题出现在我的自定义CSS文件中。问题在我取出那些坏苹果后得到解决。除非你知道它的作用，否则不要从web复制/粘贴：）

CSS不能与Javascript交互，只能与HTML交互

因此，如果您将样式应用于页面，而这似乎导致了问题，请尝试找出错误在CSS中的位置。你可以非常肯定JS没有改变它的行为

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

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

$.ajax({
url:“test.html”
}).完成（功能（结果）{
console.log（结果）；如果您记录，Ajax调用是否返回相同的结果？那么您的css很可能已损坏。否则，您的css不应该损害JS，您可以提供一个工作片段吗？我如何记录它？以及，我应该提供什么片段；关于我的css？@randy您是正确的！！感谢您的输入。这个问题在我的自定义css文件中。问题在我输入后得到解决给赛尔夫一个教训，不要从网上复制/粘贴，除非你知道它的作用：）请注意，最好在引导css之后添加自定义css，以便覆盖它。否则可能会出现副作用。哦，我明白了。感谢您的澄清。很高兴知道css和JS不会相互影响，也不会相互干扰。日志记录对于将来的参考也很重要。谢谢！