Question

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

当我最初重新加载页面并将鼠标悬停在所有内容上时。当我点击分页上的下一个，页面上的日期，然后当我悬停时，它不起作用。逻辑上我会想，因为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() 
});

Answer 1

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

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

例如，如果这是在你的jQuery ready函数中：

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

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

但如果你这样做：

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

当加载新内容时，jQuery将添加click处理程序，因为它使用live绑定。

回到bootstrap。对于类似弹出窗口的东西，据我所知，没有相应的“实时”方法。你不能改变这个：

$('a').popover()

到此：

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

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

解决这个问题的方法是绑定一个pjax：end事件，这样你就可以在插入pjax内容后做一些事情。在popover示例中：

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

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