1

我正在使用 Bootstrap 开发一个演示 Web 应用程序，并且我正在使用导航栏 (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>

加载树（）

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

创建内容（）

$('.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 回答