Toggle "active" class between li by bootstrap

Question

I'm having a trouble with toggling "active" class, my problem is a little bit different from the others, cause I already looked up similar questions. It'll be better if I explain in code.

Here is index.php:

<?php 
include("module/navbar.html");
?>

<div class="container">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Personal</li>
              <li class="active"><a href="javascript:void(0);" onclick="profile();">Profile</a></li>
              <li><a href="javascript:void(0);" onclick="my_settings();">Settings</a></li>
              <li><a href="javascript:void(0);" onclick="achievements();">Achievements</a></li>
              <li><a href="javascript:void(0);" onclick="last_results();">Results</a></li>
            </ul>
            </div>
        </div>

        <div class="span9">
            <p> Here is the index.php content </p>
        </div>
    </div>
</div>

As you see there are two menu, first one is top menu which is included by navbar.html and the second is which is in container class. When I click for example "Profile" it just loads the contents of the profile.php it's done by this script

function profile(object){

            $(".span9").html(ajax_load)
            .load("module/profile.php")
            .hide()
            .fadeIn("slow");
}

It just changes the content of span9 to the contents of profile.php. Similar to others (settings, etc). The main point is that when I click them it works perfect, the "active" class changes automatically, by the way I'm using this kind of script to toggle "active" class:

<script type="text/javascript">
   $(".nav-list li").on("click", function() {
  $(".nav-list li").removeClass("active");
  $(this).addClass("active");
});
</script>

And here is the problem. This is navbar.html:

<div class="nav-collapse">
        <ul class="nav nav-menu">
          <li class="active"><a href="index.php">Main page</a></li>
          <li><a href="javascript:void(0);" onclick="grades();">Grades</a></li>
          <li><a href="javascript:void(0);" onclick="attendance();">Attendance</a></li>
          <li><a href="javascript:void(0);" onclick="exams();">Exams</a></li>
          <li><a href="javascript:void(0);" onclick="kbo_result();">Olympiads</a></li>
        </ul>
</div>

When I click "Exams", the content of row-fluid must be changed to the contents of exams.php like I changed the content of span9. Here is the script:

function exams(object){

            $(".row-fluid").html(ajax_load)
            .load("module/exams.php")
            .hide()
            .fadeIn("slow");

}

Everything worked great, the contents have been changed, then, when I click the menus in exams.php, my script doesn't work, it just doesn't swap or toggle "active" class, between li. Here is the exams.php:

<div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">PBT Exams</li>
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
        </ul>
      </div>
    </div>

    <div class="span9">
        <p> Here is the exam.php content </p>
    </div>
</div>

Don't know what could be the problem, "active" class just stays at #1, and doesn't change. Who can answer please, I'll be really grateful.

Answer 1

Use jquery delegate system (for jQuery >= 1.7: http://api.jquery.com/on/)

You have some inputs and handlers which are binded at it. If you change DOM tree and remove element, events will not be raised again.

Solution:

<script type="text/javascript">
   $(document).on('click', '.nav-list li', function() {
       $(".nav-list li").removeClass("active");
       $(this).addClass("active");
   });
</script>

What happens now? When you click on "li" element, an event (type === 'click') will be triggered and moved up on DOM tree. Even you not directly bind click handler on target element by class/id/attribute selector, "document" (yes, jquery of course) will catch event, and process handler which you bind.