Question

我遇到了一些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>

为什么这不能正常工作？

Answer 1

所以，我们走了。实际上，您根本不会离开当前页面。您所做的只是加载叠加层，相应地操纵DOM。这是你的事件搞砸了。你所追求的解决方案是event delegation。

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

以下是有关如何修改代码以使动态DOM上的事件保持完整的演示。

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

更改代码的其他2个部分以匹配上述模式。希望有所帮助。

jQuery在访问子页面后悬停

1 个答案: