0

我有一个功能下拉列表：

    <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') %>')

标题有很多其他内容，所以我不容易更换一些部分。

4

1 回答 1

0

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

事件的重新附加可以使用jQuery 的 on()方法来实现，但由于dropdown它不是一个事件，而是一个函数，我们需要实现如下内容：

触发一个事件，例如“显示”，您可以在其中更新#header如下内容：

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

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

$(document).ready(function(){
    $(document).on('show', '#header', function() {
        $('#publish').dropdown();
    });
});
于 2013-08-27T07:51:17.257 回答