jquery只加载ajax,jQuery不通过AJAX加载内容后工作

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');

}

});

}