CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
user2312187
user2312187

Reputation: 60

Bootstrap: Double Click doesn't work

I'm using Bootstrap to develop a demo web application and I'm using a navbar (sidebar-nav) to navigate in my data (up to 3 levels). This multi level list is built dynamically and double-clicking on last element of tree get its content to show on dashboard.

The problem is: when a double click is triggered nothing happens. Even more strange is that if I copy the generated HTML string works!!!

Here's the code:

<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!");

});

This is the returnData value (generated HTML string):

<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>

Any suggestion? Thanks in advance.

Upvotes: 1

Views: 1505

Answers (1)

Kevin Pei
Kevin Pei

Reputation: 5872

It's because your event handler isn't attached to elements generated after it has been initiated. Try doing this:

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

  alert("CLICKED!");

});

Upvotes: 1

Related Questions