Bootstrap 在 Rails 4 中使用 ajax 过滤后工具提示不起作用

Question

我得到了一个显示 foo 的多个对象的索引页面，并在 gem ransack 和这个 ajax 脚本中集成了一个过滤功能：

$('#foo_search input').change(function(){
    $.get($('#foos_search').attr('action'), $('#foos_search').serialize(), null, "script");
    return false;
});

目前一切正常。之后，我在索引页面上显示的每个 foo 上添加了一个工具提示 bootstrap。 JS 代码如下所示：

$('[data-toggle="tooltip"]').tooltip();

索引页看起来像这样：

//index.html.erb
<div id="foos">
  <%= render 'foos' %>
</div>

//_foos.html.erb
<% @foos.each do |f| %>
  <div class="btn btn-default">
    <span data-toggle="tooltip" data-html="true" data-placement="top" title="<% f.details.each do |d| %><li><%= d.name %></li><% end %>">
      DETAILS
    </span>
  </div>
<% end %>

如您所见，每个 foo 都有一堆 details，所有详细信息都应该显示在工具提示中。在我使用我的过滤器之前，它工作得很好。一旦我用 ransack 过滤 foos，JS 就会停止工作，并且在我重新加载页面之前不会显示任何工具提示。

对此有什么想法吗？

编辑：我在 heroku 上上传了当前版本，所以也许你可以在那里看看。因为它是德语的，所以我会告诉你如何解决这个问题：您会在亮黄色的 jumbtrons 中看到 foo 对象，如果您将鼠标悬停在 "Geeignet für" 上，您会看到弹出的工具提示。但是一旦您使用左侧的过滤器功能，工具提示将不再起作用，而是显示一些 html.

https://sheltered-escarpment-6887.herokuapp.com/list

编辑2：这是在更改过滤器选项后重新加载部分内容：

//index.js.erb
$("#foos").html("<%= escape_javascript(render("foos")) %>");

编辑3：谢谢 cassioscabral 我想通了：

//index.js.erb
$("#houses").html("<%= escape_javascript(render("houses")) %>");
$('[data-toggle="tooltip"]').tooltip();

Answer 1

您应该再次调用方法 $('[data-toggle="tooltip"]').tooltip(); 以便它可以再次呈现工具提示。

我不明白为什么你的过滤器会影响它。也许它在搜索后呈现（并添加新的 dom 元素）部分，并且由于该元素将在您最初的 .tooltip() 调用之后添加，再次调用将是正确的方法，因为它基本上是说 'add the tooltip to all the elements with this data-toggle, including the new ones'

Bootstrap 在 Rails 4 中使用 ajax 过滤后工具提示不起作用

Bootstrap tooltip is not working after filtering with ajax in Rails 4

ajax

ruby-on-rails-4

twitter-bootstrap-3

tooltip

ransack