AJAX 替换中断下拉列表 - Twitter Bootstrap

Question

我有一个功能性下拉菜单：

    <li data-dropdown="publish-dropdown-menu">
      <a href="#" id="publish">
        Publish
        <img alt="" border="0" src="/assets/publish-arrow.jpg">
      </a>
    </li>

这个下拉菜单的元素是（HAML）：

  .home-dropdown-menu.publish-dropdown-menu#publish-dropdown-menu
    .top-arrow
    %a.your-services{:href => new_service_path}
      .icon-drop
      %span
        Your
        %br>/
        Service
    %a.your-event{:href => new_event_path}
      .icon-drop
      %span
        Your
        %br>/
        EVENT

但是当它被 AJAX 取代时，它就不再起作用了。

这是我尝试过的：

$('#publish').dropdown()
$('#publish').parent().dropdown()

但这些都不起作用。

关于如何在页面加载后重置下拉行为的任何建议。

更新

这就是我替换内容的方式：

$('#header').html('<%= escape_javascript(render 'layouts/header') %>')

页眉还有很多其他内容，有些部分我不太容易替换。

Answer 1

dropdown 函数或第一次加载 DOM 时附加的任何事件不适用于新添加的元素。您需要重新附加最初附加的任何事件并重新调用您在这些元素上调用的函数。

事件的重新附加可以使用jQuery on()方法来实现，但是dropdown不是一个事件，是一个函数，我们需要实现类似下面的东西：

触发事件，例如'show' 更新#header 的内容，如下所示：

$('#header').html("<%= escape_javascript(render 'layouts/header') %>").trigger('show');

然后在您的 javascript 中的 show 事件处理程序中的元素上调用 dropdown：

$(document).ready(function(){
    $(document).on('show', '#header', function() {
        $('#publish').dropdown();
    });
});