jQuery不通过AJAX加载内容后工作

@H_404_0@

在 this page我有一个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

    }
);

});

解决方法

jQuery选择器在代码执行时选择存在于DOM中的匹配元素，并且不动态更新。当你调用一个函数，例如.hover()来添加事件处理程序时，它只会将它们添加到这些元素。当您执行AJAX调用，并替换您的页面的一部分，您要删除这些元素与事件处理程序绑定到他们，并用新元素替换它们。即使这些元素现在匹配那个选择器，它们也不会得到事件处理程序的绑定，因为要执行的代码已经执行。

事件处理程序

特别是对于事件处理程序(即.click())，你可以使用事件委托来解决这个问题。基本原理是，你绑定一个事件处理程序到静态(当页面加载时，存在，不会被替换)元素，将包含所有的动态(AJAX加载)内容。您可以在jQuery documentation了解更多关于事件委托的信息。

对于您的点击事件处理程序，更新的代码如下所示：

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

这将绑定一个事件处理程序到整个文档(所以永远不会被删除，直到页面卸载)，这将反应与点击的id属性的元素的点击事件。理想情况下，您应该使用更靠近DOM中动态元素的元素(可能是网页中的< div>)，并且包含您的所有网页内容，因为这样会提高效率。

问题出现时，你需要处理.hover()，虽然。 JavaScript中没有实际的悬停事件，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
        },function () {
            $(this).removeClass('image-popout-shadow');
        }); //END FUNCTION

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

jQuery插件

这涵盖了事件处理程序绑定。然而，这不是你所做的一切。你还初始化了一个jQuery插件(colorBox)，没有办法将它们委托给元素。当你加载你的AJAX内容时，你将不得不再次调用这些行;最简单的方法是将它们移动到一个单独的命名函数，然后你可以在两个地方(在页面加载和你的AJAX请求成功回调)调用：

function initialiseColorBox() {
    $(".iframe").colorBox({
        iframe: true,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');
        }
    });
}

jQuery不通过AJAX加载内容后工作

解决方法

相关文章