jQuery在通过AJAX加载内容后不起作用
在这个页面上，我有一个jQuerypopup窗口和缩略图可resize的图像。 如果将鼠标hover在缩略图上，图像的大小将会完美调整。 此外，当我点击页脚中的大黄色电视button“QuickBook TV”时，popup窗口会完全按照我的意愿显示。
但是，当我点击“下一步”或“上一步”button时，使用AJAX加载新的内容，我的jQuery不再适用于popup窗口或缩略图图像。 我已经search了一些论坛寻找关于这个问题的信息，但由于有限的jQuery知识，我一直无法理解我需要做什么。
以下是popup式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 } ); });
当代码执行时，jQueryselect器select存在于DOM中的匹配元素，而不会dynamic更新。 当你调用一个函数，比如.hover()来添加事件处理程序时，它只.hover()它们添加到这些元素中。 当你做一个AJAX调用，并replace你的页面的一部分，你将删除这些元素绑定到事件处理程序，并用新的元素replace它们。 即使这些元素现在与该select器匹配，他们也不会获得事件处理程序绑定，因为要执行的代码已经执行。
事件处理程序
特别是对于事件处理程序（即.click() ），您可以使用事件委托来解决这个问题。 基本的原则是，你将一个事件处理程序绑定到一个静态（存在，当页面加载，不会被取代）元素将包含所有的dynamic（AJAX加载）的内容。 您可以在jQuery文档中阅读关于事件委派的更多信息。
对于您的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属性的元素上的事件。 理想情况下，您可以使用更接近DOM中的dynamic元素的东西（可能是您网页上的<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请求successcallback）：
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'); } }); }
在我find能为我工作的解决scheme之前，有同样的问题。 所以如果将来有人可以给我一个机会，让我知道是否正确，因为我所能find的所有解决scheme都比这个复杂一点。
正如Tamer Durgun所说的，我们也将把你的代码放在ajaxStop中，所以每当Ajax完成任何事件时你的代码都会被恢复。
$( document ).ajaxStop(function() { //your code }
为我工作:)
// 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' }); }
更换内容时，您的事件处理程序正在丢失。 当你设置hover事件时，jQuery将它们设置在当前页面上的事件上。 所以当你用ajaxreplace它们时，这些事件并不与那些元素相关联，因为它们是新的。
要解决这个问题，你可以调用绑定他们的函数，或者你可以在文档中设置事件处理函数，就像在这个答案中使用$（document）.on
通过这种方式在文档上设置事件，并且任何新元素都将获得所调用的事件。
您可以使用jQuery ajax的完整函数在某个地方检索到数据后，它会在ajax完成后看到更新后的元素
