CODEWITHSUNDEEP
jquery
tom_cruz
tom_cruz

Reputation: 411

Jquery .on("click") doesn't work the second time

<ul class="nav nav-tabs tabb">
        <li id="li_permission_info_<?=$this->id_permission?>" class="active" >
            <a data-toggle="tab" href="#tab_permission_info_<?=$this->id_permission?>"><i class="icon-user"></i>Permission Information <?=$this->id_permission?></a>
        </li>
        <li id="li_permission_details">
            <a data-toggle="tab" href="#tab_permission_details_<?=$this->id_permission?>" data-value="<?=$this->id_permission?>"><i class="icon-home"></i>Permission Details</a>
        </li>
</ul>

$("body").on("click", "#li_permission_details", function(event){

    console.log("test");

});

I'm having problem as the jquery script is not activated the second tim e a click the <li> tag

Upvotes: 3

Views: 4966

Answers (4)

Sushil Kumar
Sushil Kumar

Reputation: 1529

I think somewhere in the code you are detaching the events... I faced the same issue, somewhere in the code I used $(document).off("click"), which removed all the click events attached to the document.

Upvotes: 3

Rajeshkumar
Rajeshkumar

Reputation: 895

It's working fine. To tune better instead of referring from body tag add a div id to the top of the link like below and try.

<div id="rajesh">Here your content</div>

$(#rajesh).on("click", "#li_permission_details", function(event){
    alert("Rajesh");
}

Running example here

Upvotes: 0

Prabhat Jain
Prabhat Jain

Reputation: 346

I have tried this code and this is working fine. Try this :

<html>
   <head>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   </head>
   <body>
      <ul class="nav nav-tabs tabb">
         <li id="li_permission_info_<?=$this->id_permission?>" class="active" >
             <a data-toggle="tab" href="#tab_permission_info_<?=$this->id_permission?>"><i class="icon-user"></i>Permission Information <?=$this->id_permission?></a>
         </li>
         <li id="li_permission_details">
             <a data-toggle="tab" href="#tab_permission_details_<?=$this->id_permission?>" data-value="<?=$this->id_permission?>"><i class="icon-home"></i>Permission Details</a>
         </li>
      </ul>

      <script>
          $( "body" ).on( "click", "#li_permission_details", function() {
              alert('Hi');
          });
      </script>
   </body>
</html>

Upvotes: 3

Karan
Karan

Reputation: 3328

I don't see any problem in your script. I made the jsFiddle for it and it is working fine. Stick the jq script inside the DOMReady event. 

$("body").on("click", "#li_permission_details", function(event){
    alert("test");
});

Upvotes: 0

Related Questions