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

Question

I have this block of code that will display a text after hovering cursor over a DIV:

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

This is working well. But then I have a button for loading another content through partial. The needed content is loaded well, but the problem is that the jQuery code above doesn't work.

I've tried to put this code

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

to the JS file that render new content, like this:

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

But not even now is the hover event fired.

I've tried also this:

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

but again, no success.

How to handle this situation? I am using Rails 4 and jQuery v1.11.1.

Thank you in advance.

Answer 1

The content is inserted dynamically, so you'll need delegated event handlers

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

Answer 2

You are setting up event handlers before .articles is inserted into page DOM; Just try to reverse order of adding the partial content and setting up the hover event, eg

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