Question

我正在使用Bootstrap开发一个演示Web应用程序，我正在使用导航栏（侧栏导航）来导航我的数据（最多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>

Known Issues已知的（）

$("#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>

有什么建议吗？提前谢谢。

Answer 1

这是因为您的事件处理程序未附加到启动后生成的元素。试着这样做：

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

  alert("CLICKED!");

});

Bootstrap：双击不起作用

1 个答案: