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

DOM が初めてロードされたときに関連付けられたdropdown関数またはイベントは、新しく追加された要素に対しては機能しません。最初にアタッチされたイベントを再アタッチし、それらの要素で呼び出した関数を再度呼び出す必要があります。

イベントの再接続はjQuery の on()メソッドを使用して実現できますが、これdropdownはイベントではなく関数であるため、次のようなものを実装する必要があります。

#header次のようなコンテンツを更新する「show」などのイベントをトリガーします。

$('#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 に答える