Jump to content

pass JS "this" to jQuery click handler?


Mad_Griffith

Recommended Posts

Hi, below, I am creating a slider. I am passing the sliding method to the click handler, but such method doesn't fire when I call it. Do you have any idea why?

 

Thank you :)

this.sliding = function(e) {
	that.slide_width = $(that.article).width();
	that.slide_number = $(that.article).size();
	that.max_pos = that.slide_width * (that.slide_number - 1);
	that.left_pos = $(that.inner).position().left;
	if ($(this).hasClass('article-previous') && that.left_pos < 0) {
		$(that.inner).css({
			'left': '+=' + that.slide_width + 'px'
		});
	}
	if ($(this).hasClass('article-next') && -that.left_pos < that.max_pos) {
		$(that.inner).css({
			'left': '-=' + that.slide_width + 'px'
		});
		that.animateSkills();
	}
};

element.find('.article-previous, .article-next').off('click').on('click', { slidingAction : this.sliding}, function(e){
    e.stopImmediatePropagation;
    e.data.slidingAction; // doesn't fire! 
});
Edited by Mad_Griffith
Link to comment
Share on other sites

To call a function you need parentheses. In these two lines, speifically:

e.stopImmediatePropagation;
e.data.slidingAction; // doesn't fire! 

Change it to be like this:

e.stopImmediatePropagation();
e.data.slidingAction();

However, are you sure that e.data is an object with a slidingAction() method?

Link to comment
Share on other sites

Thank you! I edited the code but it doesn't work. I consolelogged the event and this is what I get:

 

1zlazw0.png

 

I have also tried doing the following, unsuccessfully:

var that = this;

this.sliding = function(e) {
 // blah blah
}

element.find('.article-previous, .article-next').off('click').on('click', function(e){
    e.stopImmediatePropagation();
    that.sliding();
});
Edited by Mad_Griffith
Link to comment
Share on other sites

Thanks for your help. In the end I fixed it by passing the event from the click handler to the object method, but I didn't solve the original problem.

 

Basically, when I click on the left or right arrow in the slideshow, there is an animation lasting a few milliseconds.

 

During such animation, if the user clicks a second time on the same button, this ends up destroying the slideshow pretty badly (as in: the last slide, be it on the left or on the right, ends up outside the viewport).

 

How could I make only the first click matter or at least wait until the sliding animation is done?

Edited by Mad_Griffith
Link to comment
Share on other sites

When the animation starts, set an "animating" flag to true. When the animation ends, set the flag to false.

 

Before starting an animation, make sure that "animating" is false. If it's true then do nothing.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...