jquery code doesn't work in ajax loaded content

jquery code doesn't work in ajax loaded content

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.
p.s. 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);
}
});