Rails PJAX和Twitter Bootstrap插件播放效果不佳

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