jQuery BootStrap加载顺序

我使用Bootstrap框架来构建网站。jQuery BootStrap加载顺序

我在加载自定义CSS文件时遇到问题。在这个文件中，我重写了一些元素，比如navbar的颜色。当用户提交表单时，我会对php文件进行ajax调用，并且该文件的响应应该被加载到模态消息中。

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

UPDATE

我现在的解决方法是在引导CSS之前装载我的自定义CSS，然后在HTML页面中添加我的造型，像这样：

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

但是，如果我从我的css文件中执行相同的样式，除非我的CSS文件在BS css文件后加载，这会打破我的jQuery调用。 :(

更新2 作为建议由一个评论者，这个问题是我的自定义CSS文件。问题解决了，一旦我把这些烂苹果了。不要从网上复制/粘贴，除非你知道那是什么:)

来源

2016-05-29 Aram Hakopian

如果记录日志，Ajax调用是否返回相同的值？那么很可能你的CSS坏了。否则，你的CSS应该*不会伤害JS，你能提供一个工作片段吗？ – Randy

我该如何登录？而且，我应该提供什么片段;我的CSS？ –

@randy你是对的！谢谢您的意见。问题出在我的自定义CSS文件中。一旦我把那些坏苹果拿出来，问题就解决了。对自己的教训，不要复制/粘贴从网络，除非你知道它是什么:) –

CSS无法与您的Javascript进行交互，只能使用您的HTML。

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

阿里纳斯 你想知道如何来记录你的Ajax调用：

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

在浏览器上点击右键，选择inspect element，去安慰。你可以在那里看到输出。

来源

2016-05-29 09:34:01 Randy

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

jQuery BootStrap加载顺序

回答

相关问题