JQuery and the click function

Question

This code doesn't work as intended, what am I doing wrong?

$(document).ready(function(){
  $("a.hide-para").click(function(){
    $('p').hide();
    $(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
  });
  $("a.show-para").click(function(){
    $('p').show();
    $(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
  });
});

Answer 1

try return false; in the click handler

Answer 2

It doesn't work because you are dynamically adding/removing the class after the elements are bound to specific element/class combinations. That is to say, you are adding the click event to links with a class of "show-para" before there are any links with that class (or maybe the other way around depending on your default)

In either case, jQuery has the live function to get around that, just change your click handlers to .live('click', function(){ })

Answer 3

You're losing the bindings as you are modifying the DOM. Either stop changing the classnames or bind the events using live():

$('a.hide-para').live('click', function() { ...

Answer 4

I think this:

removeClass('hide-para').addClass('show-para')

Is causing your issue.

Answer 5

If your click is actually following the links rather than doing your event call you can do the following:

$("a.hide-para").click(function(evt){
    evt.preventDefault();
    // the rest is your code...

This prevents the default (link following action) from occurring... except in IE6.

Hope this helps.

Answer 6

Assuming your classes always start out as "hide-para", this should work:

$(document).ready(function() {
    $("a.hide-para").click(function(){
        if($(this).hasClass('hide-para')){
            $('p').hide();
            $(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
        } else {
            $('p').show();
            $(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
        }
    });
});

Answer 7

It will work for the first change, but after that it will just do the same change again.

The events are applied once when the page is loaded, changing the class won't remove and add event handlers.

Instead of using one event handler for hiding and one for showing, you can use one that does both:

$(function() {
  $("a.hide-para, a.show-para").click(function(e) {
    if ($(this).hasClass('hide-para')) {
      $('p').hide();
      $(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
    } else {
      $('p').show();
      $(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
    }
    e.preventDefault();
  });
});

Also, calling preventDefault prevents the default action for the click, i.e. following the link.