html - My javascript function works only after I hard refresh the page - Stack Overflow

admin管理员组

文章数量:1352161

I know that there are multiple questions about this same problem, but I couldn't find an answer in any of them. I'm using javascript to activate hover on other elements. The javascript code works fine but it only works after I hard refresh the page, CTRL + R. If I go to the page normally it won't work.

JS:

      $(function() {
      $('#faqBg').hover(function() {
      $('#spanContainer').css('background', 'rgb(0, 0, 0, 0.6');
      }, function() {
        // on mouseout, reset the background colour
      $('#spanContainer').css('background', '');
      });
    });

.image-wrapper {
 position: relative;
}
 
 #faqBg { 
    background: linear-gradient(-45deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),url(.jpeg?auto=press&cs=tinysrgb&dpr=1&w=500);
    padding: 60px 0px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    }
    
 #spanContainer {
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 20px 0px;
    }
    

<script src=".3.1/jquery.min.js"></script>

<div class="image-wrapper">

<div id="faqBg">

<div id="spanContainer">

Hover trigger

</div>

</div>

</div>

I know that there are multiple questions about this same problem, but I couldn't find an answer in any of them. I'm using javascript to activate hover on other elements. The javascript code works fine but it only works after I hard refresh the page, CTRL + R. If I go to the page normally it won't work.

JS:

      $(function() {
      $('#faqBg').hover(function() {
      $('#spanContainer').css('background', 'rgb(0, 0, 0, 0.6');
      }, function() {
        // on mouseout, reset the background colour
      $('#spanContainer').css('background', '');
      });
    });

.image-wrapper {
 position: relative;
}
 
 #faqBg { 
    background: linear-gradient(-45deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://images.pexels./photos/1239162/pexels-photo-1239162.jpeg?auto=press&cs=tinysrgb&dpr=1&w=500);
    padding: 60px 0px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    }
    
 #spanContainer {
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 20px 0px;
    }
    

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image-wrapper">

<div id="faqBg">

<div id="spanContainer">

Hover trigger

</div>

</div>

</div>

This is the code Im using, here when I do it everything seems allright, but on the website it doesnt. I tried adding $(document).ready and $(document).load but it didnt worked.

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Jul 8, 2019 at 12:05 Freelancer Help asked Jul 8, 2019 at 11:13 Freelancer HelpFreelancer Help 19111 gold badge44 silver badges1515 bronze badges 6

• I tested with Chrome [Version 71.0.3578.98 (Official Build) (64-bit)] and worked just fine: trustmypetsitter.herokuapp./faq – vladwoguer Commented Jul 8, 2019 at 11:16
• why are you using JS to trigger hover at all? Why not simply use CSS? Have you tried with CSS ? – Devashish Commented Jul 8, 2019 at 11:18
• When you land on the page it works, but can you navigate to some other page and then return to the faq, it wont work. – Freelancer Help Commented Jul 8, 2019 at 11:18
• Why are you doing stuff that CSS can handle perfectly on its own, using JavaScript in the first place? #faqBg:hover #spanContainer { /*format me like one of your french girls*/ } – misorude Commented Jul 8, 2019 at 11:19
• @Davashish I haven't, I didn't had luck with css, couldn't make it working so I used jQuery. – Freelancer Help Commented Jul 8, 2019 at 11:19

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6

This is happening because of cache.

Add version to you javascript file on loading:

<script src="file.js?v=1"></script> Increment the v parameter on each change you want to see. If your page is generated dynamically you can set to v a timestamp value, depends on the backend language you are using.

Another solution is to use these meta tags:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Use CSS instead:

 #faqBg:hover #spanContainer { 
       background: rgba(0,0,0,0.6);
 }

The javascript function in your code includes style change, which will be reflected after a hard refresh.

Can you please confirm whether any other JS function(a function without style change) acts the same way you mentioned.

本文标签： htmlMy javascript function works only after I hard refresh the pageStack Overflow