如何用.on（）方法替換.live（）方法

Question

嘿..我有一個函數來加載更多新聞。由於jquery-1.9.1.min.js這個函數工作正常，但現在我不得不用.on（）方法替換它，並且仍然無法工作。

下面是代碼：

// Load more news feed 
    $(function(){ 
     var page = 1; 
     $.ajax({ 
      type: "POST", 
      url: "data.php", 
      data: "page=profile&get_news_feed=true", 
      dataType:'json', 
      success: function(data){ 
       $("#the_news_feed").html(data.news_feed); 
       if(page <= data.total_pages){ 
        $("#the_news_feed").after('<button id="load_more_feed" class="btn btn-primary btn-large" style="width: 100%;margin-top:10px">Load More</button>'); 
       } 
      } 
     }); 
     $("#load_more_feed").live("click", function(){ 
      var next = page+=1; 
      $.ajax({ 
       type: "POST", 
       url: "data.php", 
       data: "page=profile&get_news_feed=true&page_num="+next, 
       dataType: "json", 
       success: function(data){ 
        $("#the_news_feed").append(data.news_feed); 
        if(next == data.total_pages){ 
         $("#load_more_feed").remove(); 
        } else { 
         $("#load_more_feed").html("Load More"); 
        } 
       }, 
       beforeSend: function(){ 
        $("#load_more_feed").html("Loading..."); 
       } 
      }); 
     }); 
    }); 

我tryed更換：

$("#load_more_feed").live("click", function() 

與

$("#the_news_feed").on("click", "load_more_feed", function() 

，但我仍然不能得到它的工作。我究竟做錯了什麼？謝謝！

我顯示此功能使用id = 「news_feed」 所以這裏是問題

<div class="tab-pane fade" id="news_feed"> 
    <div id="the_news_feed"></div> 
</div> 

最終的解決方案是$("#news_feed").on("click", "load_more_feed", function()

謝謝你們！

Answer 1

其實，你在id選擇器中缺少#。

$("#the_news_feed").on("click", "load_more_feed", function() 

必須是

$("#the_news_feed").on("click", "#load_more_feed", function() 

假設#the_news_feed是#load_more_feed母體。

編輯：

從你的代碼，你以後#the_news_feed追加這個#loadmore按鈕，所以這顯然是行不通的。嘗試將其更改爲：

$(document).on("click", "#load_more_feed", function() 

這會將點擊綁定到document，這將始終存在。或者，您可以將其綁定到距離最近的靜態父級，比如加載頁面時不存在動態創建的元素。