jquery - .on('mouseenter', function(){... not working -
i have following event:
$('.swiper-slide-active').on('mouseenter', function(){ $(this).find('.overlay').addclass('show'); $(this).find('.hotspot').addclass('show'); })
problem class .swiper-slide-active added when slider ready, thought .on had replaced .live event. nothing happens when rollover element has class. there way wait until class added?
the slider initiated this:
var myswiper = new swiper('.swiper-container',{ .... })
use delegated on
event dynamic elements:
$(document).on('mouseenter', '.swiper-slide-active', function(){ $(this).find('.overlay').addclass('show'); $(this).find('.hotspot').addclass('show'); })
it works listening event (in case mouseenter
) bubbled non-changing parent (document
default if have nothing closer changing elements hang off), then applies jquery filter, then runs supplied function against matching elements that caused event
if case hang .swiper-container
efficiency:
e.g.
$('.swiper-container').on('mouseenter', '.swiper-slide-active', function(){ $(this).find('.overlay').addclass('show'); $(this).find('.hotspot').addclass('show'); })
*note: avoid using "body"
hang delegated events from, instead of document
, body
has style-related problems delegated events.
Comments
Post a Comment