3

嘿，所以我将 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() 
});
4

1 回答 1

9

短版：使用 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 内容时，它将运行该函数并将弹出功能应用于任何锚元素，包括新插入的元素。您可以通过选择器将其进一步隔离到仅包含新内容的容器，这样您就不会将功能重新应用于未更改的内容。

于 2012-03-23T01:29:33.063 回答