jquery代码无法在ajax加载的内容中工作

Question

是的，我在这里查看槽相同的文章，谷歌帮助。但我是一名设计师，而不是编码员。我可以复制\粘贴一些代码，甚至改变一些东西，但这个问题对我来说太难了。

所以，我在我的主页上有新闻，当你向下滚动时，下一页加载ajax。有一个脚本，为每个帖子显示\隐藏评级栏。但是这个代码在加载的内容中不起作用。请修复它，如果它不适合你。

p.s.我尝试着看（），或者活下去，但是因为我以前难过，而不是我的水平。

$(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

尝试将您的代码包含在ajax html数据中，或者您可以在添加了html后将您的脚本添加到done函数中。

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

这些是使用jQuery访问ajax数据的三种不同方式。

Answer 2

我目前时间很短，但我会尽我所能。

当你的.hover()等被执行时，它们绑定到你提供的实际元素。现在，当您的事件绑定到DOM元素时，通过AJAX加载的元素不可用。

一个解决方案是已经提供的解决方案。但是，有一个更好的恕我直言。你需要的事件通常是“冒泡”，这意味着它们会沿着DOM树向上传递。您需要将您的事件绑定到DOM元素，该元素不会通过AJAX进行替换/更改，而是持久化的。如果你有一个容器#content，其中你的AJAX被加载进去，你想把这个容器作为你的事件绑定的基础，因为那个冒泡。

尝试更换您的$('.someClass').click()与

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