小编典典
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中动态元素的内容(也许
页面上始终存在一个动态元素，并包含所有页面内容)，因为这样可以提高效率。
不过，问题出在您需要处理.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');
}
});
}
2020-07-26