1

我有以下事件：

$('.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',{
            ....
          })
4

3 回答 3

2

对动态元素使用委托事件： on

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

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

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

例如

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

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

于 2014-06-27T13:06:28.313 回答
1

会是这样的

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

bind和livewith之间的区别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 ) {} );
于 2014-06-27T13:08:08.370 回答
-1

利用$( document ).ready( handler )

$( document ).ready(function() {
$('.swiper-slide-active').on('mouseenter', function(){
            $(this).find('.overlay').addClass('show');
            $(this).find('.hotspot').addClass('show');
     })
});
于 2014-06-27T13:07:44.660 回答