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