3

私は数時間検索と実験を行ってきましたが、解決策はjqueryの.on（）関数にあると思います。しかし、私は正しい実装を理解できないようです。

タブ付きメニューがあり、ドロップダウンとしてタブの1つにコンテンツを追加したいのですが、コンテンツはdocument.readyで読み込まれるはずです。

<div id="container" class="layout" style="border: 1px solid">
   <ul class="tabs">
    <li><a id="go_archives" href="#">Archives</a> </li>
    <li><a id="go_answers" href="#">Puzzle Answers</a>
    <ul class="dropdown">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
      <li><a href="#">Six</a></li>
    </ul>
    </li>
</div>

関連するCSSは次のとおりです

/* menu tab styling */

ul.tabs {
  display: table;
  margin: 0;
  padding: 0 0 20px 2px;
  list-style: none;
  position: relative;
  border-bottom: 1px solid #00AEDB;
}

ul.tabs li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table-cell;
  float: left;
  position: relative;
}

ul.tabs a {
  position: relative;
  display: block;
  font-size: 13px;
  line-height: 14px;
  font-weight: normal;
  margin: 0 7px 4px 2px;
  padding-bottom: 2px;
  text-decoration: none;
  color: #fff;
}

ul.tabs a:hover {
  border-bottom: 3px solid #FFF;
  padding-bottom: 2px;
}

/* dropdown styling */

ul.dropdown {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  z-index: 999;
  top: 100%;
  left:0;
}

ul.dropdown ui.dropdown {
  top: 0;
  left: 95%;
}

ul.dropdown li {
  margin: 0;
  padding: 0;
  float: none;
  position: relative;
  list-style: none;
  display: block;
}

ul.dropdown li a {
  font-size: 13px;
  line-height: 14px;
  font-weight: normal;
  display: block;
  width: 100%;
}

とJS

$('.dropdown').parent().mouseenter(function () {
    $('.dropdown', this).slideToggle('fast');
  });

$('.dropdown').parent().mouseleave(function () {
    $('.dropdown', this).slideUp('fast');
  });

これはすべて、go_answersLIの下でULをスライドさせるために正常に機能します

ファイアバグで私は以下を実行します

$.get("shite.html", function(result){
    $("#go_archives").parent().append(result);
  });

shite.htmlをロードします

<ul class="dropdown">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
        <li><a href="#">five</a></li>
        <li><a href="#">six</a></li>
</ul>

DOMを更新します（これは正しい用語だと思います）が、アーカイブリンクにマウスを合わせるとスライドしません。

スライドさせるために何が欠けていますか？

4

3 に答える 3

2

あなたはそのように.on（）メソッドを実装することができます：

$("#container").on({
    mouseenter: function (event) {    
       $('.dropdown', this).slideToggle('fast');
    },            
    mouseleave: function (event) {
       $('.dropdown', this).slideUp('fast');   
    },
    mousedown: function (event) {
       //Do stuff
    }
    },
    ".dropdown"
);
于 2012-09-18T19:12:39.083 に答える
0

そのようなDOM要素を動的にリロードするときは、イベントを再アタッチする必要があります。mouseenterコマンドとmouseleaveコマンドを関数に入れて、ドキュメントの準備ができてget内でその関数を呼び出す必要があります。

ここにフィドルを設定して、これを設定する方法を示します。あなたが提示した結果は、私が非表示のdivに保存したajax呼び出しからの戻りであり、テストボタンをクリックすると、divの内容がリストアイテムに追加されます。新しいDOM要素が配置されたら、jqueryを再実行してセレクターに新しい要素を取得させ、cssクラスを操作した後、ドロップダウンが機能する期待されるプレゼンテーションを取得します。

全体的なポイントは、Jqueryセレクターからの結果に割り当てるイベントは、実行時にセレクターと一致する要素にのみ追加されることに注意してください。セレクターと一致する新しい要素をDOMに挿入しても、新しい要素がアタッチされた動作を取得することを意味するわけではありません。

于 2012-09-18T19:12:10.117 に答える
0

私は同じ問題に直面していました

jQuery

$(function() {
    $(".mytable").on('click', '.toggle', function () {
    alert("toggle Clicked");
    });
});

ajaxの前のHTML

<div class="tabs">
    <ul class="tab-links" id="tab-links">

    </ul>

    <div class="tab-content" id="tab-content">

    </div>
</div>

ajax後のHTML

<div class="tabs">
    <ul class="tab-links" id="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>        
    </ul>

    <div class="tab-content" id="tab-content">
        <div id="tab1" class="tab active" >
            <table id="mytable1" class="mytable">
                <tr data-depth="0" class="expand level0">
                    <td>
                    <span class="toggle expand">+</span>
                    Everything Else [<a class="link">99</a>]
                    </td>   
                    <td> 1$</td>    
                </tr>
            </table>
        </div>
    </div>
</div>

それは機能していなかったので、私はそれをに変更します

jQuery

$(function() {
    $(document).on('click', '.mytable .toggle', function () {
    alert("toggle Clicked");
    });
});

今はうまくいっていました。

于 2014-08-04T13:34:56.247 に答える