Jump to content
Mad_Griffith

pass JS "this" to jQuery click handler?

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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I would add a breakpoint inside the slidingAction function to see if it's running, and if it is, then which line of code inside the function is failing.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...