javascript - Function not being called when I return to the page

Question

I have two images, the first image can be any size and I'd like the second image, right beside it to be the same height as the first image. I wrote the following code:

<script>
  $(function() {
    $("#first").load(function() {
      var imgheight = $(this).height();
      $("#first_papers").css("height", imgheight); 
    });
  });
</script>

The above code works fine. The problem is that when I visit another page on the site and then return to the main page the function doesn't seem to be called. What happens insteadis that the second image is appearing at its full height instead of the shorter height of the first image.

Any ideas on how to fix this?

Answer 1

为了在页面加载时保持一致的行为，我会将其从匿名函数中取出并将其放入$(document).ready函数中。

<script>
    $(document).ready(function(){
        $("#first").load(function() {
            var imgheight = $(this).height();
            $("#first_papers").css("height", imgheight); 
        });
    });
</script>

这应该使它在您的页面加载时执行，无论您何时/如何导航到它。