與裝載HTML/jQuery的通過Ajax

Question

這裏的問題是一些簡單的HTML線，我在我的網站正文：在我的頭

HTML

<h1 class="trigger"> 
    First Headline 
</h1> 
<div class="toggle_container"> 
    Some Lorem Ipsum here 
</div> 

然後，我有這個jQuery

jQuery的

$(document).ready(function() { 
    $('.trigger').not('.trigger_active').next('.toggle_container').hide(); 
    $('.trigger').click(function() { 
     var trig = $(this); 
     if (trig.hasClass('trigger_active')) { 
      trig.next('.toggle_container').slideToggle('slow'); 
      trig.removeClass('trigger_active'); 
     } else { 
      $('.trigger_active').next('.toggle_container').slideToggle('slow'); 
      $('.trigger_active').removeClass('trigger_active'); 
      trig.next('.toggle_container').slideToggle('slow'); 
      trig.addClass('trigger_active'); 
     }; 
     return false; 
    }); 
}); 

加載該網站後，HTML將更改爲此，並單擊標題切換「Lorem ipsum」容器的 。到目前爲止，一切正常。

HTML

<h1 class="trigger"> 
    First Headline 
</h1> 
<div class="toggle_container" style="display: none;"> 
    Some Lorem Ipsum here 
</div> 

現在，這裏是我的問題：有在它增加了使用AJAX一個新的HTML塊的網站底部的 「加載更多內容」按鈕。

該HTML塊顯示正常，但它以某種方式被上述jQuery的 忽略。

我在這裏做錯了什麼？ 我是否必須將jQuery另外添加到AJAX中？ 如果是這樣，究竟在哪裏？

這裏是AJAX代碼。腳本的作者發表了評論，而不是我。

阿賈克斯/ jQuery的

jQuery(document).ready(function($) { 

    // The number of the next page to load (/page/x/). 
    var pageNum = parseInt(pbd_alp.startPage) + 1; 

    // The maximum number of pages the current query can return. 
    var max = parseInt(pbd_alp.maxPages); 

    // The link of the next page of posts. 
    var nextLink = pbd_alp.nextLink; 

    /** 
    * Replace the traditional navigation with our own, 
    * but only if there is at least one page of new posts to load. 
    */ 
    if(pageNum <= max) { 
     // Insert the "More Posts" link. 
     $('#content') 
      .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>') 
      .append('<p id="pbd-alp-load-posts"><a href="#">↓ Archive</a></p>'); 

     // Remove the traditional navigation. 
     $('.navigation').remove(); 
    } 


    /** 
    * Load new posts when the link is clicked. 
    */ 
    $('#pbd-alp-load-posts a').click(function() { 



     // Are there more posts to load? 
     if(pageNum <= max) { 

      // Show that we're working. 
      $(this).text('...'); 

      $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post', 
       function() { 
        // Update page number and nextLink. 
        pageNum++; 
        nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum); 

        // Add a new placeholder, for when user clicks again. 
        $('#pbd-alp-load-posts') 
         .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>') 

        // Update the button message. 
        if(pageNum <= max) { 
         $('#pbd-alp-load-posts a').text('Older entries'); 
        } else { 
         $('#pbd-alp-load-posts a').text('All items loaded.'); 
        } 
       } 
      ); 
     } else { 
      $('#pbd-alp-load-posts a').append('.'); 
     } 

     return false; 
    }); 
}); 

PS：因爲我是一個絕對的初學者到這一切，它會是很有益的，如果你可以發佈，而不是指揮我這個代碼的一些工作線路或那個功能。謝謝。 ：D

Answer 1

我看到的問題是綁定事件。您綁定它的方式，它只綁定到標記中當前可用的元素。

通過ajax獲取html添加的新元素不會被添加到事件處理程序中。對於需要修改的事件綁定語句授權綁定：

$(document).on('click', '.trigger', function() { 

});