Switch the "active" class between li by bootstrap

Question

I had problems switching the "active" class, my problem is slightly different from the others, because I already looked for similar questions. It will be better if I explain in the 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 can see, there are two menus, the first is the top menu, which is included navbar.html, and the second - in the container class. When I click, for example, “Profile”, it just loads the contents of profile.php made by this script

function profile(object){

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

It just changes the contents of span9 to the contents of profile.php. Similar to others (settings, etc.). The main thing is that when I click on them, it works fine, the "active" class changes automatically, by the way, I use this type of script to switch the "active" class:

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

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

"", - exams.php, span9. script:

function exams(object){

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

}

, , , exams.php, script , "" li. 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>

, , "" # 1 . , , .

Answer 1

jQuery ( jQuery >= 1.7: http://api.jquery.com/on/)

, . DOM , .

:

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

? "li", ( === 'click') DOM. //, "" (, , jquery) , .