Question

我有这段代码，它会在将光标悬停在DIV上后显示文字：

$(document).ready(function() {
  $('.articles').hover(function(){
    $(this).next('.article_details').toggleClass('hidden');
  });
  ...

这很好用。但后来我有一个按钮，可以通过局部加载另一个内容。所需的内容加载得很好，但问题是上面的jQuery代码不起作用。

我试图把这段代码

  $('.articles').hover(function(){
    $(this).next('.article_details').toggleClass('hidden');
  });

到呈现新内容的JS文件，如下所示：

$('.articles').hover(function(){
    $(this).next('.article_details').toggleClass('hidden');
});
$('#show_articles').html("<%= j render(:partial => '/articles/list_of_list_of_articles') %>");

但即使是现在也没有发起hover事件。

我也试过这个：

$('.articles').on("hover", function(){
    $(this).next('.article_details').toggleClass('hidden');
});
$('#show_articles').html("<%= j render(:partial => '/articles/list_of_list_of_articles') %>");

但是再次没有成功。

如何处理这种情况？我正在使用Rails 4和jQuery v1.11.1。

提前谢谢。

Answer 1

内容是动态插入的，因此您需要委派的事件处理程序

$('#show_articles').on({
    mouseenter : function() {
        $(this).next('.article_details').addClass('hidden');
    },
    mouseleave : function() {
        $(this).next('.article_details').removeClass('hidden');
    }
}, '.articles');

Answer 2

您正在设置事件处理程序，然后将 .articles插入到页面DOM中;只是尝试颠倒添加部分内容和设置悬停事件的顺序，例如

$('#show_articles').html("<%= j render(:partial => '/articles/list_of_list_of_articles') %>");
$('.articles').hover(function(){
    $(this).next('.article_details').toggleClass('hidden');
});

Rails - 如何通过AJAX调用渲染部分中的jQuery事件？

2 个答案: