Search code examples
javascriptjquerythiseventtrigger

"this" reference when using jQuery trigger, triggerHandler, or simulate


Our css guys have an icon overlaying an image thumbnail for a video. When the user clicks the thumbnail, the video should play (and it does!), but when they click the overlaying "play" image, that image consumes the click and it's not directly passed to the underlying image.

So I searched and found the trigger() function of jQuery and added it to the icon click handler to trigger the thumbnail handler and it works fine EXCEPT that when thumbnail click is run, the "this" reference is for the icon, not the corresponding thumbnail.

I've tried triggerHandler() and jQuery's internal simulate() functions and it's all the same.

In the event handler I need the id of the actual thumbnail and not the overlay icon.

Is there anyway to have an overlaying image ignore the click and just let it bubble up (or down) to something else in the z-order? Or even simply fire them both?


Solution

  • return true; in parent event (overlaying "play" image) will continue to the child event (thumbnail)