Calling a jQuery function multiple times

Question

So, I have this function in jQuery:

$(function(){ 
$( ".unfocused" ).click(function ClickHeader () {
    $( this ).addClass( "focused" );
    $( this ).removeClass( "unfocused" );
    $(".header").not(this).addClass( "unfocused" );
    $(".header").not(this).removeClass( "focused" );
});
});

It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!

delegate event in order to get it works for new .unfocused elements (with unfocused class added) and btw no more for old ones (class removed) — A. Wolff
– A. Wolff, Commented Nov 17, 2013 at 20:29

GolezTrol · Accepted Answer · 2013-11-17 20:37:29Z

3

Change it like this:

  $( document ).on("click", ".unfocused", function() {
    $( this ).addClass( "focused" );
    $( this ).removeClass( "unfocused" );
    $(".header").not(this).addClass( "unfocused" );
    $(".header").not(this).removeClass( "focused" );
  });

This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.

edited Nov 17, 2013 at 20:37

answered Nov 17, 2013 at 20:31

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sam · Accepted Answer · 2013-11-17 20:36:14Z

1

Here is a jsfiddle using the delegate operation for handling the event like you need.

http://jsfiddle.net/MN9Zt/2/

$("body").delegate(".unfocused", "click", function() {
    $(this).addClass("focused");
    $(this).removeClass("unfocused");
    $(".header").not(this).addClass("unfocused");
    $(".header").not(this).removeClass("focused");
});

answered Nov 17, 2013 at 20:36

Sam

2,2112 gold badges21 silver badges28 bronze badges

3 Comments

GolezTrol Over a year ago

As of jQuery 1.7, .delegate() has been superseded by the .on() method. Still valid code, though.

Baegus Over a year ago

Totally awesome! Works like a charm. :)

Sam Over a year ago

@GolezTrol thanks for the comment! I always forget which one is the best to use. About all I can remember is "live" is "dead" (deprecated)

Collectives™ on Stack Overflow

Calling a jQuery function multiple times

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related