jquery code doesn't work in ajax loaded content

Question

Yes, I looked trough same articles here, and google helped. But I'm a designer, not a coder. I can copy\\paste some code, even change something, but this problem is too hard for me.

So, I have news on my main page, and when you scroll down, next page loads with ajax. There is a script, that shows\\hides rating bar for every post. But this code doesn't work inside the loaded content. Please, fix it, if it's not to hard for you.

ps I've tried to look into on(), or live, but as I sad before, not my level.

$(document).ready(function() {

var element = $('#dle-content .main-news');
for (i=0; i<element.length; i++)
    {
        $(element[i]).addClass('news-'+i);
    }

$('#dle-content .main-news').hover(
    function() {
        $('.main-news-hidden').stop(true);
        $(this).find('.main-news-hidden').animate({
            'bottom':'0'
        },400
        );
    }, function() {
        $('.main-news-hidden').stop(true);
        $(this).find('.main-news-hidden').animate({
            'bottom':'-120'
        }, 0);
        $('.main-news-hidden').stop(true);
});

$('.top-news li').hover(
    function() {
        $('.top-news-hidden').stop(true).fadeOut(0);
        $(this).find('.top-news-hidden').animate({
            'opacity':'1'
        },400, function()
            {
                $(this).fadeIn();
            }
        );
    }, function() {
        $('.top-news-hidden').stop(true);
        $(this).find('.top-news-hidden').fadeOut(100);
});

var element2 = $('.top-news li');
for (i=0; i<element2.length; i++)
    {
        $(element2[i]).find('.list').append(i+1);
    }

});

Answer 1

Try to include your code in ajax html data , or you can add your script in done function after the html appended.

$.ajax({
  url: "yourUrl",     
}).done(function(data) {
   $("#yourId").html(data);   // Solution 1 :  your content is loaded with ajax, Also this data has your jQuery script
   // Solution 2:  Now start you can call your script via function or add directly here (only html data is needed)
   yourFunction();
   //Solution 3: Now add your jquery code directly
   $(".someClass").click(function(){
     //events
   });
});

These are three differents ways to accessing ajax data with jQuery.

Answer 2

I'm currently short on time, but I'll try my best.

When your .hover() etc are executed, they're bound to the actual element you're providing. Now, the elements that you load via AJAX are not available on the time your events are bound to your DOM elements.

One solution is the one already provided. However, there is IMHO a nicer one. The events you need are usually "bubbling", which means they get somewhat passed upwards along the DOM tree. You need to bind your events to a DOM element which does not get replaced/changed via AJAX, but is persistent. If you eg have a container #content in which your AJAX gets loaded into, you want to take this container as base for your event binding, because of that bubbling.

Try replacing your $('.someClass').click() with

$('#content').on('click', '.someClass', function(event) {
  // your event handling
});