Question

我有以下事件：

$('.swiper-slide-active').on('mouseenter', function(){
            $(this).find('.overlay').addClass('show');
            $(this).find('.hotspot').addClass('show');
     })

问题是当滑块准备就绪时会添加类.swiper-slide-active，但我认为.on已经替换了.live事件。滚动具有该类的元素时，没有任何反应。有没有办法等到添加课程？

滑块的启动方式如下：

 var mySwiper = new Swiper('.swiper-container',{
            ....
          })

Answer 1

将委派的 on事件用于动态元素：

$(document).on('mouseenter', '.swiper-slide-active', function(){
        $(this).find('.overlay').addClass('show');
        $(this).find('.hotspot').addClass('show');
 })

通过监听事件（在这种情况下为mouseenter）冒泡到一个不变的父级（document是默认的，如果你没有更接近变化的元素来挂掉它），然后它应用了一个jQuery过滤器，然后它运行提供的函数来对抗导致事件的任何匹配元素

如果是您的情况，您可能会将其挂起.swiper-container以提高效率：

e.g。

$('.swiper-container').on('mouseenter', '.swiper-slide-active', function(){
        $(this).find('.overlay').addClass('show');
        $(this).find('.hotspot').addClass('show');
 })

*注意：请避免使用"body"挂起委托事件，而不是document，因为body与委派事件存在一些与样式相关的问题。

Answer 2

会是这样的

$(document).on('mouseenter', '.swiper-slide-active', function(){

bind和live与on之间的区别是这样的

// Bind
$( ".swiper-slide-active" ).on( "click", function( e ) {} );
$( ".swiper-slide-active" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", ".swiper-slide-active", function( e ) {} );
$( ".swiper-slide-active" ).live( "click", function( e ) {} );

Answer 3

使用$( document ).ready( handler )

$( document ).ready(function() {
$('.swiper-slide-active').on('mouseenter', function(){
            $(this).find('.overlay').addClass('show');
            $(this).find('.hotspot').addClass('show');
     })
});

.on（'mouseenter'，function（）{...无效

3 个答案: