Ajax生成的內容和jQuery事件綁定

Question

我有一個顯示產品的頁面。產品通過ajax請求顯示。產品包含分頁按鈕。這裏是我的 $（「文件」）。就緒（函數（）{

$.ajax({ 
      url: '<?=base_url().'catalog/show_listings';?>', 
      type:'POST', 
      dataType: 'json', 
      success: function(data){ 
        $('#result_container').html(data); 
       }, // End of success function of ajax form 
      complete : function(){ 
        $('ul#pag-link > li > a').click(function(){ 

         var link = $(this).attr('href') 

         $.ajax({ 
          url: '<?=base_url().'catalog/show_listings';?>', 
          type:'GET', 
          dataType: 'json', 
          success: function(listings){ 
            $('#result_container').html(listings); 
           } // End of success function of ajax form  
         }); // End of ajax call        

         return false; 
        }); 
       } 
      }); // End of ajax call 

在第一個Ajax調用我得到的列表，並將其顯示在DIV #result_container的成功。然後在完成同樣的阿賈克斯調用我在無序列表＃pag- 鏈接（分頁按鈕）上創建一個點擊鏈接，這應該返回下一組列表並再次顯示在#result_container中，它也會再次加載分頁按鈕。完成這個工作是因爲我不能做到這一點，因爲分頁按鈕不存在綁定。

這是問題，使它工作我將不得不再次在ajax完整的廣告d分頁按鈕的onclick事件。我將不得不爲更多產品和分頁的每個Ajax負載做到這一點。

這顯然不是正確的做法。有什麼建議麼？

Answer 1

委託的事件處理容器中的元素，始終是有..

$.ajax({ 
    url: '<?=base_url().'catalog/show_listings';?>', 
    type:'POST', 
    dataType: 'json', 
    success: function(data){ 
     $('#result_container').html(data); 
    } // End of success function of ajax form 
}); // End of ajax call 

$('#result_container').on('click', '#pag-link > li > a', function(){ 
    var link = $(this).attr('href'); 

    $.ajax({ 
     url: '<?=base_url().'catalog/show_listings';?>', 
     type:'GET', 
     dataType: 'json', 
     success: function(listings){ 
      $('#result_container').html(listings); 
     } // End of success function of ajax form  
    }); // End of ajax call        

    return false; 
}); 

和DOM準備運行這個（以外的所有AJAX來電）

---

（也如果這兩個調用是相同的，則可以創建一個函數並使用它來避免重複的代碼。）