javascript - 在 jQuery 中通过 AJAX 加载内容时画廊滑块错误

Question

我正在使用 jQuery 插件（链接）将外部页面拉入我主页上的 div 中，并且每个外部页面都包含一个基于 jQuery 的水平画廊滑块。

示例：http ://www.iamtimothylong.com/example

您会注意到，当通过 AJAX 请求（通过单击“第一册”或“第二册”）加载外部页面时，这些外部页面中的水平滑块停止工作。

但是，如果静态放置在 div 中，水平滑块确实可以工作（很明显这不是滑块本身的问题）。

有人知道解决方案/解决方法吗？一个人说

“在 XHR 请求完成后，您需要将滑块重新绑定到新元素。在 AJAX 请求的成功处理程序中，执行 mScrollBar() 绑定。”

不幸的是，我是一个编程无知的人，我需要用外行的话来说明它。:)

AJAX 加载器源位于此处：/js/menu.js

Answer 1

我会说这是一个经典案例，将未触发的事件替换为.live('event')

基本上，当 javascript 被触发并在页面加载时附加事件处理程序（或每当它们被调用时），它会将它们附加到当时存在于页面上的当前现有元素，因此当您加载新内容时（通过 AJAX）这些事件不会附加到刚刚加载并匹配选择器的新内容事件。

为了解决这个问题，jQuery 有一个.live()匹配任何当前存在的 DOM 元素和动态添加的未来元素的事件。