內容通過AJAX加載後，jQuery不起作用

Question

On this page我有一個jQuery彈出窗口和縮略圖可調整大小的圖像。如果我將鼠標懸停在縮略圖上，圖像的大小將完美調整。另外，當我點擊頁腳中的大型黃色電視按鈕「QuickBook TV」時，彈出窗口會完全按照我的意願顯示。

但是，當我點擊「Next」或「Prev」按鈕時，AJAX用於加載新內容，並且我的jQuery不再用於彈出窗口或縮略圖圖像。我搜索了一些論壇尋找關於這個問題的信息，但由於對jQuery的知識有限，我一直無法理解我需要做什麼。

以下是彈出的jQuery

$(document).ready(function() { 

     $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" }); 
     $(".inline").colorbox({ inline: true, width: "50%" }); 
     $(".callbacks").colorbox({ 
      onOpen: function() { alert('onOpen: colorbox is about to open'); }, 
      onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); }, 
      onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); }, 
      onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); }, 
      onClosed: function() { alert('onClosed: colorbox has completely closed'); } 
     }); 

     //Example of preserving a JavaScript event for inline calls. 
     $("#click").click(function() { 
      $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here."); 
      return false; 
     }); 
    }); 

這是縮略圖的jQuery

$(function() { 

var xwidth = ($('.image-popout img').width())/1; 
var xheight = ($('.image-popout img').height())/1; 

$('.image-popout img').css(
     {'width': xwidth, 'height': xheight} 
); //By default set the width and height of the image. 

$('.image-popout img').parent().css(
     {'width': xwidth, 'height': xheight} 
); 

$('.image-popout img').hover(
    function() { 
     $(this).stop().animate({ 
      width : xwidth * 3, 
      height : xheight * 3, 
      margin : -(xwidth/3) 
      }, 200 
     ); //END FUNCTION 

     $(this).addClass('image-popout-shadow'); 

    }, //END HOVER IN 
    function() { 
     $(this).stop().animate({ 
      width : xwidth, 
      height : xheight, 
      margin : 0 
      }, 200, function() { 
       $(this).removeClass('image-popout-shadow'); 
    }); //END FUNCTION 

    } 
); 

}); 

Answer 1

jQuery選擇器在執行代碼時選擇存在於DOM中的匹配元素，並且不會動態更新。當你調用一個函數，如.hover()添加事件處理程序時，它只會將它們添加到這些元素。當您執行AJAX調用並替換頁面的一部分時，您將使用綁定到它們的事件處理程序刪除這些元素，並用新元素替換它們。即使這些元素現在與該選擇器匹配，它們也不會獲得事件處理程序綁定，因爲要執行的代碼已經執行。

事件處理程序

具體的事件處理程序（即.click()），可以使用事件代理來解決這個問題。基本原則是你將一個事件處理程序綁定到一個靜態（存在當頁面加載時，不會被替換），它將包含你的所有動態（加載了AJAX的）內容。您可以在jQuery documentation中閱讀有關活動委派的更多信息。

爲了您click事件處理程序，更新的代碼是這樣的：

$(document).on('click', "#click", function() { 
    $('#click').css({ 
     "background-color": "#f00", 
     "color": "#fff", 
     "cursor": "inherit" 
    }).text("Open this window again and this message will still be here."); 
    return false; 
}); 

這將事件處理程序綁定到整個文檔（所以永遠不會刪除，直到頁面卸載），將反應到click事件的id屬性爲click的元素。理想情況下，您可以使用更接近DOM中的動態元素的東西（可能是頁面上的<div>始終存在幷包含您的所有頁面內容），因爲這會提高效率。

但是，如果您需要處理.hover()，則會出現此問題。有在JavaScript中沒有實際hover事件，jQuery的只是提供了功能作爲事件處理程序綁定到mouseenter和mouseleave活動方便的速記。你可以，但是，使用事件委派：

$(document).on({ 
    mouseenter: function() { 
     $(this).stop().animate({ 
      width: xwidth * 3, 
      height: xheight * 3, 
      margin: -(xwidth/3) 
     }, 200); //END FUNCTION 

     $(this).addClass('image-popout-shadow'); 
    }, 
    mouseleave: function() { 
     $(this).stop().animate({ 
      width: xwidth, 
      height: xheight, 
      margin: 0 
     }, 200, function() { 
      $(this).removeClass('image-popout-shadow'); 
     }); //END FUNCTION 

    } 
}, '.image-popout img'); 

---

jQuery插件

覆蓋事件處理程序綁定。但是，這並不是你所做的。您還初始化jQuery插件（colorbox），並且無法將這些插件委派給元素。當你加載你的AJAX內容時，你將不得不再次簡單地調用這些行;最簡單的方法是將搬完到一個單獨的命名函數，然後可以在兩地調用（在頁面加載，並在你的AJAX請求success回調）：

function initialiseColorbox() { 
    $(".iframe").colorbox({ 
     iframe: true, 
     width: "1000px", 
     height: "500px" 
    }); 
    $(".inline").colorbox({ 
     inline: true, 
     width: "50%" 
    }); 
    $(".callbacks").colorbox({ 
     onOpen: function() { 
      alert('onOpen: colorbox is about to open'); 
     }, 
     onLoad: function() { 
      alert('onLoad: colorbox has started to load the targeted content'); 
     }, 
     onComplete: function() { 
      alert('onComplete: colorbox has displayed the loaded content'); 
     }, 
     onCleanup: function() { 
      alert('onCleanup: colorbox has begun the close process'); 
     }, 
     onClosed: function() { 
      alert('onClosed: colorbox has completely closed'); 
     } 
    }); 
} 

Answer 2

當更換內容您的事件處理程序正在喪失。當你設置你的事件時，jQuery將它們設置在當前頁面上的事件上。所以當你用ajax替換它們時，這些事件並不與那些元素相關聯，因爲它們是新的。

爲了解決這個問題，你可以調用再結合它們的功能，也可以在此使用answer $（文件）。在

這樣的事件設置上，而不是設置的事件處理程序的文檔文檔和任何新的元素都會得到所要求的事件。

Answer 3

您可以取回後使用jQuery阿賈克斯的完整功能阿賈克斯完全

Answer 4

  // EXAMPLE FOR JQUERY AJAX COMPLETE FUNC. 
      $.ajax({ 
      // get a form template first 
      url: "../FPFU/templates/yeni-workout-form.html", 
      type: "get", 
      success: function(data){ 
      // insert this template into your container 
       $(".content").html(data); 
      }, 
      error: function(){ 
       alert_fail.removeClass("gizle"); 
       alert_fail.addClass("goster"); 
       alert_fail.html("Template getirilemedi."); 
      }, 
      complete: function(){ 
       // after all done you can manupulate here your new content 
       // tinymce yükleme 
       tinymce.init({ 
        selector: '#workout-aciklama' 
       }); 
      } 

Answer 5

後的數據形式的地方，它會看到更新的內容有同樣的問題，我能夠找到它爲我工作的解決方案之前。 所以如果將來任何人都可以給它一個機會，並讓我知道它是否正確，因爲我所能找到的所有解決方案都比這更復雜一點。

因此，通過馴Durgun如說，我們也將會把裏面ajaxStop你的代碼，所以你的代碼將任意各種事件是由AJAX完成的時間恢復。

$(document).ajaxStop(function() { 

//your code 

} 

爲我工作:)