Rails PJAX 和 Twitter Bootstrap 插件无法正常运行答案

【问题标题】：Rails PJAX and Twitter Bootstrap Plugins Not Playing NicelyRails PJAX 和 Twitter Bootstrap 插件无法正常运行
【发布时间】：2012-03-10 16:40:28
【问题描述】：

嘿，所以我将 Rails PJAX 用于带有 twitter bootstrap Jquery 插件的 Web 应用程序。我似乎无法让他们两个一起工作。举个例子，我有分页并且对某些元素有一些悬停效果。

当我最初重新加载页面并将鼠标悬停在它工作的所有内容上时。当我单击分页上的下一个时，页面更新日期，然后当我悬停时，它不起作用。从逻辑上讲，我会认为是因为 DOM 已经加载了一次。我能做什么？

还要注意，在 Rails 3.2 应用程序上使用 Rails Pjax，我不必在应用程序中为 Pjax 编写任何 Jquery。

https://github.com/nz/pjax-rails http://twitter.github.com/bootstrap/javascript.html#popovers

已解决：

我实际上解决了这个问题

$(document).on('ready ajaxComplete', function() { 
   $('a').popover() 
});

【问题讨论】：

github.com/nz 这里——为了后代，上面链接的 repo 只是一个我没有使用或维护的玩具。最好使用github.com/rails/pjax-rails ;)

标签： jquery ruby-on-rails twitter-bootstrap pjax

【解决方案1】：

短版：使用 pjax:end 事件将引导行为应用于新元素。

当 pjax 加载新内容时，引导处理程序尚未绑定到所有元素。使用典型的 jQuery 元素，您可以使用“live”让 jQuery 检测新内容并应用正确的处理程序。抱歉，如果第一部分是您已经知道的内容。

例如，如果这是在您的 jQuery 就绪函数中：

$('a').click(function() { alert('here') }

如果您动态加载包含另一个锚元素的内容，则单击处理程序不会绑定到它。

但如果你这样做：

$('a').live('click', function() { alert('here') }

加载新内容时，jQuery 将添加点击处理程序，因为它是使用 live 绑定的。

回到引导程序。据我所知，对于弹出框之类的东西，没有等效的“实时”方法。您无法更改：

$('a').popover()

到这里：

$('a').live('popover')  # WON'T WORK

因此，如果通过 pjax（或 ajax 或任何动态）加载锚点，则任何新锚点都不会绑定为弹出框。

解决方法是绑定一个 pjax:end 事件，这样您就可以在插入 pjax 内容后做一些事情。在弹出框示例中：

$(document)
  .on('pjax:end', function() { $('a').popover() })

每当加载 pjax 内容时，它都会运行该函数并将弹出框功能应用于任何锚元素，包括新插入的元素。您可以通过选择器将其进一步隔离到仅包含新内容的容器中，这样您就不会将功能重新应用于未更改的内容。

【讨论】：