Question

I have this HTML:

<header>
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-inverse pull-left" href="myfile.html"> &larr; prev</a>
        <ul class="nav">
          <li><a href="#">Lorem</a></li>
          <li class="active"><a href="#">ipsum</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">ipsum</a></li>
        </ul>
        <a class="btn btn-inverse pull-right disabled" href="file.html">next &rarr;</a>
      </div>
    </div>
  </div>
</header>

and this JS (in document.ready wrapper):

$(".disabled").bind('click', function(e){
  e.preventDefault();
});

When I click on the disabled link, I still open the next page. Why?

Answer 1

As it also worked for me as a Fiddle, I knew the problem needed to be in some other part of my script. After a bit of debugging I’ve found the problem:

$(".disabled").bind('click', function(e){
  e.preventDefault();
});

was set in an on wrapper:

$("#poem").on("click", function() {
  $(".disabled").bind('click', function(e){
    e.preventDefault();
  });
})

After writing it like this:

$(".disabled").bind('click', function(e){
 e.preventDefault();
});

$("#poem").on("click", function() {
  // something...
})

it works now!