jQuery悬停后访问子页面

jQuery hover after visit subpage

本文关键字：访问 悬停 jQuery      更新时间：2023-09-26

我遇到了一些jQuery代码的问题。

当我加载我的主页时，图片上的slideDown悬停功能正在工作，但是当我访问其他子页面然后返回我的主页时，slideDown悬停功能不工作。

编辑:你可以在我的页面上看到:193.218.134.131:3000

下面是我的代码:

$(document).ready(function() {
    $('.standard').hover(
        function(){
            $(this).find('.caption').show();
        },
        function(){
            $(this).find('.caption').hide();
        }
    );
    $('.fade').hover(
        function(){
            $(this).find('.caption').fadeIn(250);
        },
        function(){
            $(this).find('.caption').fadeOut(250);
        }
    );
    $('.slide').hover(
        function(){
            $(this).find('.caption').slideDown('fast');
        },
        function(){
            $(this).find('.caption').slideUp('fast');
        }
    );
});



<div class="grid-block slide">
    <div class="caption">
        <h2><%= link_to "About us", about_path %></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p><%= link_to "About us", about_path, :class => 'learn-more' %></p>
    </div>
    <%= link_to image_tag("about2.jpg", :class => 'img-rounded img-responsive', :alt => 'test alt'), about_path %>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

为什么这个不能正常工作?

我们开始吧。实际上，您根本没有离开当前页面。你所做的就是加载叠加，相应地操纵DOM。这就是你的活动搞砸的时候。您需要的解决方案是事件委托。

From the doc: Delegated事件的优点是它们可以处理来自后代元素的事件，这些事件稍后会添加到文档中。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁地附加和删除事件处理程序。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者是事件处理程序想要监视文档中所有冒泡事件的文档。在加载任何其他HTML之前，document元素在文档的头部可用，因此在那里附加事件是安全的，而无需等待文档准备好。

下面是一个演示，说明如何修改代码以在动态DOM上保持事件完整。

$(document).ready(function() {
    $(document).on({
        'mouseenter': function() {
            $(this).find('.caption').slideDown('fast');
        },
        'mouseleave': function() {
            $(this).find('.caption').slideUp('fast');
        }
    }, '.slide');
});

更改代码的其他两个部分以匹配上述模式。

相关文章：