在 jQuery 中通过 AJAX 加载内容时库滑块错误

Question

我正在使用一个 jQuery 插件 (link) 将外部页面拉入我主页上的 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 元素 AND 未来动态添加的元素。