jQuery call custom function on click

Question

How would I correctly call the specialHouse function after the h1 was clicked, in way that would still allow $(this) to represent div.content. Currently the below does not work with the error "Uncaught TypeError: Object [object Object] has no method 'specialHouse'"

function specialHouse()
{
    $(this).slideDown(500, function(){
      $(this).delay(2000).slideUp();
    });
 };

$('div.content').hide();
$('h1').on('click', function(){
    $(this).next('div.content').specialHouse();
})

Thanks for any help :)

jantimon · Accepted Answer · 2012-07-02 11:10:55Z

6

You have to tell jQuery about your new function:

jQuery.fn.specialHouse = function() {
   return this.slideDown(500, function(){
     $(this).delay(2000).slideUp();
   }
}

As we return this our function is chain able:

$("a").specialHouse().text("Hello World");

answered Jul 2, 2012 at 11:10

jantimon

38.5k23 gold badges127 silver badges195 bronze badges

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

3 Comments

Ben_hawk Over a year ago

why do we have to return 'this' in order for the function to be chain-able :S

jantimon Over a year ago

This is how every chain-able jQuery plugin works. this is returned and the next function may use it again.

Alnitak Over a year ago

FWIW, I think the other answer is better. It works without modifying the OP's original function, and thus allows that function to continue to be used as a standalone event handler.

Niko · Accepted Answer · 2012-07-02 11:11:31Z

5

The way you've tried it works only for jQuery plugins. You can however invoke the function like this (the context this will be set as expected):

$('h1').on('click', function() {
    $(this).next('div.content').each(specialHouse);
});

answered Jul 2, 2012 at 11:11

Niko

26.8k9 gold badges97 silver badges112 bronze badges

1 Comment

Alnitak Over a year ago

good way to do it without converting that function into a plugin

mgraph · Accepted Answer · 2012-07-02 11:10:31Z

1

Try :

$('div.content').hide();
$('h1').on('click', function(){
    specialHouse($(this).next('div.content'));
}) 

function specialHouse(elem){
  $(elem).slideDown(500, function(){
     $(this).delay(2000).slideUp();
   });
};

answered Jul 2, 2012 at 11:10

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

1 Comment

Alnitak Over a year ago

The OP specifically requested $(this) - not a parameter.

Collectives™ on Stack Overflow

jQuery call custom function on click

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related