如何在由AJAX返回的HTML中調用jQuery函數

我有一個頁面，其中有帖子和用戶給予評論。評論是使用AJAX處理的。每條評論欄都有一個「投票」按鈕。如何在由AJAX返回的HTML中調用jQuery函數

在索引頁，我已經把jQuery函數的投票現在

<script type="text/javascript"> 
$(function() { 
     $('.voteUpBtn').click(function() { 
       // Cast your vote 
      } 
    } 
</script>

當用戶提交一個新的評論，它使AJAX調用並追加使用jQuery到索引頁面的HTML

$.ajax({ 
     type: "POST", 
     url: "proc/add-line.php", 
     data: dataString, 

     cache: false, 
     success: function(html){ 
      $("ul#nextLines").append(html); 
     } 
    });

在附加的HTML上，我有相同的投票按鈕。（每個評論都有相應的投票按鈕）。

問題是，由AJAX生成的新評論的「投票」按鈕不起作用。如果我刷新了頁面，那麼投票就起作用（儘管我使用了相同的標記）。

如何讓投票按鈕可以在AJAX返回的HTML中工作？

來源

2011-03-02 ptamzz

使用live而不是click：

$('.voteUpBtn').live('click', function() { 
    // Cast your vote 
}

來源

2011-03-02 14:46:17 Emmett

如果我沒有事件，或者事件處於頁面加載狀態，該怎麼辦。我有''（'＃newline'）。elastic（）;'，現在我希望它在將來也可以應用於所有選擇器。我如何改變語法？ – ptamzz 2011-03-15 06:20:28

使用jquery.live結合

http://api.jquery.com/live/

<script type="text/javascript"> 
$(function() { 
     $('.voteUpBtn').live("click, "function() { 
       // Cast your vote 
      } 
    } 
</script>

來源

2011-03-02 14:45:03 Amitabh

可以使用live方法將一個事件附加到所有匹配的元素，即使他們沒有在該位置創建：

$('.voteUpBtn').live('click', function(){ ... });

這樣，當您的ajax內容被加載時，點擊事件將自動應用到新的.voteUpBtn。

來源

2011-03-02 14:45:35

您可以使用live到「附加處理器爲當前選擇，滿足其所有元素的事件，現在和未來」：

http://api.jquery.com/live/

來源

2011-03-02 14:45:57 soju

您應該使用'live'方法，而不是'點擊'按鈕綁定事件。

$（ 'voteUpBtn '）。住（' 點擊'，函數（）{// 社區一票 }

來源

2011-03-02 14:46:40 Scalar

當你介紹新的HTML代碼到您的網頁（用AJAX請求，例如），以前設置的事件不會自動分配給新引入的DOM元素，因此，即使您的新DOM元素的類屬性設置爲「voteUpBtn」，您的「.voteUpBtn」元素的單擊事件也不存在。您必須再次將此事件添加到您的AJAX請求的成功函數中新引入的DOM元素。

或者...您可以使用live（）函數「將處理程序附加到該事件對於當前選擇現在和將來匹配這，所有的元素。」 http://api.jquery.com/live/

或者......你可以使用委託（）函數，它其實更像是活（）的替代。它可以做幾乎所有live（）可以做的事情，但它可以更有效一些。

來源

2011-03-02 14:47:27 BMiner

使用delegate而不是live（如果您可以使用jQuery> 1.4），因爲它是more efficient。

在原始綁定上沒有live或delegate，動態添加的元素不會拾取jQuery綁定。

來源

2011-03-02 14:48:56 andyb

更新

這是一個古老的答案。從jQuery 1.7開始，使用.on()可以獲得相同的結果。原來答案是片斷的等效，下面，現在是：

$('#ul.nextlines').on('click', '.voteUpBtn', function (e) { 
    // your voting logic here 
});

原來的答案

我推薦使用.delegate()了.live()。兩者都可以工作，但在包含對象上擁有一個事件處理程序會更清晰。

$('#ul.nextlines').delegate('.voteUpBtn', 'click', function(){ 
    // your voting logic here 
});

除非你指定一個背景下，.live()將處理程序本質上綁定到整個DOM的根源，因此，觀看在整個文檔事件。另外，即使期望的效果在將來，選擇器也會立即運行，即.live()。因此.live()的性能不如.delegate()，其範圍受限，其選擇器（本例中爲「.voteUpBtn」）而非立即運行。有些情況下，這些性能差異可能會引起注意，例如具有多行的表格或具有多個項目的列表。

來源

2011-03-02 14:51:36

關於代表（）的有趣點。我同意...應該更有效率。我將不得不開始使用該功能。謝謝！ – BMiner 2011-05-13 18:49:17

如何在由AJAX返回的HTML中調用jQuery函數

回答

相關問題