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"、 の代わりに を使用してデリゲート イベントをハングすることは避けてください。documentbody

于 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 に答える