通过AJAX加载内容后jQuery不起作用

Question

在这个页面上,我有一个jQuery弹出窗口和缩略图可调整大小的图像.如果我将鼠标悬停在缩略图上,则图像会完美调整大小.此外,当我点击页脚中的大黄色电视按钮"QuickBook TV"时,弹出窗口完全按照我的要求显示.

但是,当我单击"下一步"或"上一页"按钮时,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文档中阅读有关事件委派的更多信息.

对于您的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(),问题就出现了.hoverJavaScript中没有实际的事件,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

在我能够找到适合我的解决方案之前遇到同样的问题.因此,如果将来任何人都可以试一试并让我知道它是否正确,因为我能找到的所有解决方案都比这更复杂.

正如Tamer Durgun所说,我们还将您的代码放在ajaxStop中,因此每次ajax完成任何事件时都会恢复您的代码.

$( document ).ajaxStop(function() {

//your code

}

为我工作:)