Response title
This is preview!
Understanding trigger() and triggerHandler()
in Using jQuery
•
9 years ago
Hi there
I've been trying to get my head around how trigger works, I've had difficulties with triggering bound functions to elements. The unexpected behaviour is that when triggering a bound function to a matched element, the bound functions for all other elements also get executed. This causes conflict with my understanding of how bind() and trigger() can be used.
To view an example of this, please take a look at: http://jsbin.com/osere3/
The logic is essentially:
So my understanding is that once you have bound functions to an element, you can execute those functions by using trigger.
In the case of my example, the following line follows this understanding:
Which is essentially div.trigger('toggle')
So I find the element, then I simply execute the function on that single element.
Why, when I do this, does trigger() execute the 'toggle' function for other elements?
The solution to this problem is to use triggerHandler() instead of trigger(), but i'd really love some clarification on why trigger() is doing this. I couldn't find information in the docs explaining why toggle does this.
Any information would be super rad. Thanks.
I've been trying to get my head around how trigger works, I've had difficulties with triggering bound functions to elements. The unexpected behaviour is that when triggering a bound function to a matched element, the bound functions for all other elements also get executed. This causes conflict with my understanding of how bind() and trigger() can be used.
To view an example of this, please take a look at: http://jsbin.com/osere3/
The logic is essentially:
- - bind 3 different functions (expand, collapse and toggle) to the divs
- - when the user clicks on the spans, find the closest div to the span, and execute the bound 'toggle' function for that div
- - within the 'toggle' function, execute either the 'expand' or 'collapse' funtion bound to the div
So my understanding is that once you have bound functions to an element, you can execute those functions by using trigger.
In the case of my example, the following line follows this understanding:
- var div = $( this ).next();
- div[ triggerAction ]( 'toggle' );
Which is essentially div.trigger('toggle')
So I find the element, then I simply execute the function on that single element.
Why, when I do this, does trigger() execute the 'toggle' function for other elements?
The solution to this problem is to use triggerHandler() instead of trigger(), but i'd really love some clarification on why trigger() is doing this. I couldn't find information in the docs explaining why toggle does this.
Any information would be super rad. Thanks.
1