jQuery on（click）/ click事件未触发

Question

I am very bad at UI design so i used bootstrap and jquery to help me alittle bit. I am trying to bind jQuery event to nav bar, so when user click p tag on nav bar it should fire a click event. however, it doesn't. No matter i use jQuery("#logOff").click() or on("click","#logOff",function()) it just not firing event. below is my sample code.

jQuery(document).ready(function () {


  jQuery(document).on( 'click','#logOff', function (eve) {
    alert("haha");
  });

  // this one not work too
jQuery("#logOff").click(function (e){
   alert("haha");
  });
});

this is my html

<nav class="navbar navbar-default  navbar-fixed-top ">
        <div class="navbar-header">
          <p class="navbar-brand" >test</p>
        </div>

        <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">


          <div class="nav navbar-nav navbar-right">
            <li ><p id="#nickName" style="cursor: pointer" class="navbar-brand">Link</p></li>
            <li ><p id="#logOff" style="cursor: pointer" class="navbar-brand">log Off</p></li>
          </div>
        </div><!-- /.navbar-collapse -->

    </nav>

Answer 1

Try removing the # symbol from your id declarations - it's not required.

<li ><p id="nickName" style="cursor: pointer" class="navbar-brand">Link</p></li>
<li ><p id="logOff" style="cursor: pointer" class="navbar-brand">log Off</p></li>

The # when used in selectors searches for ids, so #logoff in your jQuery selector is saying find the element with id="logoff" which won't match with id="#logoff"