相同的代码不能用于更改选择器类型？

Question

I am using bootstrap navbar that contains some menus option. When i click on any menu, it should display the id and loads the corresponding code.

Below is the code:

$('nav a').on('click', function(){
  alert(this.id);
  window.location.href = "admin-editcp.php";
  //var NavId = this.id;
  //fxnNavClicked(NavId);
});

Its displaying correct id but not loading the new page.

When i change the selector type from nav a to testbutton as

$('#testbutton').on('click', function(){
  alert(this.id);
  window.location.href = "admin-editcp.php";
  //var NavId = this.id;
  //fxnNavClicked(NavId);
});

It works for me.. Still not able to find the cause of such issue or mistake?????

Leads will be appreciated

Below is html code

<div class="collapse navbar-collapse navbar-right">
    <ul class="nav navbar-nav temp-nav">
        <li class="active"><a href="index.php"><i class="fa fa-home fa-lg"></i></a></li>
        <li><a href="" id="INavTheHotel">The Hotel</a></li>
            <li class="dropdown">
                  <a href="" class="dropdown-toggle" >Rooms <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="" id="INavSemiDeluxe">Semi Deluxe Rooms</a></li>
                    <li><a href="" id="INavDeluxe">Deluxe Rooms</a></li>
                  </ul>
            </li>

        <li><a href="" id="INavAroundus">around us</a></li>
        <li><a href="" id="INavTariff">tariff</a></li>
        <li><a href="" id="INavContact">Contact</a></li>   

    </ul>

</div>


<button type="button btn-white" id="testbutton" class="default" data-dismiss="modal">&times;</button>

Answer 1

Just use preventDefault() for this...

$('nav a').on('click', function(e){
    e.preventDefault();
    alert(this.id);
    window.location.href = "admin-editcp.php";
});