Question

I want to dynamically (in a loop) bind a function to the .click() event of several divs. The click function should then hide the clicked div. The way i was trying it, i lost the reference to the div, and “this.” is not working for me too.

here the function i want to bind:

function do_hide() {  
    is_anim = true;  
    $(this).animate({

        opacity: 0.25,
        height: 'toggle',
        width: 'toggle'
    }, 5000, function() {

        is_anim = false;
        this.hide();
    });
}

thx for any help.

EDIT: solution with the help of ghayes

do_hide() is called here:

for (var i = 0; i < n; i++)
{    
p[i] = $("#btn"+(i+1));

p[i].click(function() {
   do_hide.call(this);
 });
}

Answer 1

You can bind the scope for ‘do_hide’ when you call it. I would suggest a pattern like the following: (working JSFiddle)

 $('.stackoverflow').click(function() {
   do_hide.call(this); 
 });

 var do_hide = function()
 {  
   is_anim = true;  
   $(this).animate({
     opacity: 0.25,
     height: 'toggle',
     width: 'toggle'
   }, 5000, 
                  function() {
                    is_anim = false;
                    this.hide();
                  });
 };

Hope this helps!