1

Bootstrap を使用してデモ Web アプリケーションを開発し、navbar (sidebar-nav) を使用してデータ (最大 3 レベル) をナビゲートしています。このマルチレベル リストは動的に構築され、ツリーの最後の要素をダブルクリックすると、そのコンテンツがダッシュボードに表示されます。

問題は、ダブルクリックがトリガーされても何も起こらないことです。さらに奇妙なのは、生成された HTML 文字列をコピーすると機能することです!!!

コードは次のとおりです。

<a href="#dashboard-menu" id="dash-menu" class="nav-header" data-toggle="collapse"> 
<i class="icon-dashboard"> </i>Dashboard</a>

<div id="dash-tree">
</div>

loadTree()

$("#dash-tree").append(returnData);

createContent()

$('.leaf').on('dblclick', function(){

  alert("CLICKED!");

});

これは returnData 値 (生成された HTML 文字列) です。

<ul id="dashboard-menu" class="nav nav-list collapse">
  <li>
    <a href="#menu-element0" class="nav-element" data-toggle="collapse">
    <i class="icon-folder-open"> </i>English Language</a>
      <ul id="menu-element0" class="nav nav-list-ele collapse">
        <li>
           <a href="#menu-item0" class="nav-element" data-toggle="collapse"> 
              <i class="icon-folder-open"> </i>English Literature</a>
                 <ul id="menu-item0" class="nav nav-list-item collapse">
                   <li class="leaf" data-id="1"> <a href="#"><i class="icon-file">     </i>Shakespeare Biography</a></li>
                   <li class="leaf" data-id="2"> <a href="#"><i class="icon-file"> </i>Shakespeare Plays</a></li>
              </ul>
          <a href="#menu-item1" class="nav-element" data-toggle="collapse"> <i class="icon-folder-open"> </i>English Grammar</a>
              <ul id="menu-item1" class="nav nav-list-item collapse">
                <li class="leaf" data-id="3"> <a href="#"><i class="icon-file"> </i>Past Continous Rules</a></li>
                <li class="leaf" data-id="4"> <a href="#"><i class="icon-file"> </i>Saxon Gentitive Rules</a></li>
              </ul>
       </li>
</ul>

なにか提案を？前もって感謝します。

4

1 に答える 1

1

これは、イベント ハンドラーが、開始後に生成された要素に関連付けられていないためです。これを試してください：

$('#dashboard-menu').on('dblclick','.leaf', function(){

  alert("CLICKED!");

});
于 2013-10-05T02:52:07.997 に答える