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

Question

我有一個頁面，我已經在其中發布帖子，並且用戶要發表評論。 注釋使用AJAX處理。 每個注釋行都有一個“投票”按鈕。

在索引頁面中，我將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中起作用？

Answer 1

使用live而不是click ：

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

Answer 2

更新資料

這是一個老答案。 從jQuery 1.7開始，使用.on()獲得相同的結果。 現在，下面相當於原始答案的代碼段是：

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

---

原始答案

我建議在.live()使用.delegate() .live() 。 兩者都可以使用，但是在包含的對象上只有一個事件處理程序會更清潔。

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

除非您指定上下文，否則.live()實質上會將處理程序綁定到整個DOM的根，因此將監視整個文檔中的事件。 同樣，使用.live() ，選擇器將立即運行，即使將來會產生所需的效果。 所以.live()將不會執行，以及.delegate()其范圍受到限制，其選擇（“.voteUpBtn”在這種情況下） 沒有立即運行。 在某些情況下，這些性能差異可能會很明顯，例如具有多行的表或具有許多項的列表。

---

Answer 3

當您在頁面中引入新的HTML代碼時（例如，使用AJAX請求），先前設置的事件不會自動分配給新引入的DOM元素。 因此，即使新的DOM元素的class屬性設置為“ voteUpBtn”，您的“ .voteUpBtn”元素的單擊事件仍不存在。 您必須將此事件再次添加到AJAX請求的成功函數中的新引入的DOM元素中。

或者...您可以使用live（）函數“為現在和將來與當前選擇器匹配的所有元素添加事件處理程序”。 http://api.jquery.com/live/

或者...您可以使用委托（）函數，它實際上更像是live（）的替代。 它幾乎可以完成live（）可以做的所有事情，但是效率更高。

Answer 4

使用委托代替live （如果可以使用jQuery> 1.4），因為它效率更高 。

動態添加的元素在沒有live或原始綁定delegate情況下不會獲取jQuery綁定。

Answer 5

使用jquery.live綁定

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

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

Answer 6

您可以使用live方法將事件附加到所有匹配的元素上，即使此時尚未創建它們：

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

這樣，當您的Ajax內容加載時，click事件將自動應用於新的.voteUpBtn 。

Answer 7

您可以使用live來“為現在和將來為當前選擇器匹配的所有元素添加事件處理程序”：

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

Answer 8

您應該使用“ 實時 ”方法，而不是“單擊”將事件綁定到按鈕。

$（'。voteUpBtn'）。live（'click'，function（）{//投票}