jquery - Rails PJAX 和 Twitter Bootstrap 插件运行不佳

Question

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

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

另请注意，在 Rails 3.2 应用程序上使用 Rails Pjax，我无需在 Pjax 应用程序中编写任何 Jquery。

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

已解决:

我实际上解决了这个问题

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

Answer 1

简短版本:使用 pjax:end 事件将 Bootstrap 行为应用于新元素。

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

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

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

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

但是如果你这样做:

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

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

返回 Bootstrap 。对于像弹出窗口这样的东西，据我所知，没有等效的“实时”方法。您无法更改此设置:

$('a').popover()

对此:

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

因此，如果 anchor 是通过 pjax(或 ajax 或任何动态方式)加载的，则任何新 anchor 都不会绑定(bind)为弹出窗口。

解决方法是绑定(bind)一个 pjax:end 事件，这样你就可以在插入 pjax 内容后做一些事情。在弹出窗口示例中:

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

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