0

以下のマークアップでは、#enableボタンは#showdiv にクラスを追加します。#hiddenこのクラスには、スパンをフェードイン/フェードアウトするメソッドが関連付けられています。

ただし、クラスが#showdiv に追加されても、クラスに関連付けられているメソッドはトリガーされません。

HTML

<input type='button' id='enable' value='Enable' />

<div id='show'>
Testing.. <span id='hidden'>Testing, 1, 2, 3.</span>
</div>​

JS

$(function() {

    // Adds .testing class after the button is clicked. however..
    $('#enable').click(function() { 
        $('#show').addClass('testing')
    });

    // It will not trigger after .testing class has been added to DIV?            
    $('.testing').hover(function() { 
        $('#hidden').fadeIn(); 
    }, function() {
        $('#hidden').fadeOut(); 
    });
});​

使用するフィドル: http://jsfiddle.net/jS3nM/

概念的に何かが欠けているようです。これを処理する正しい方法は何ですか?

4

2 に答える 2

2

jQueryはCSSのようには機能しません。を実行すると$("selector")、現在そのセレクターに一致するドキュメント内の要素のリストが返されます。

次に、jQueryメソッドを使用してこれらの要素を操作します。「クラスターゲットメソッド」のような魔法はありません。

次の場所にイベントリスナーを追加できますdocument。

$(document).on({
    mouseenter: function() {
        $('#hidden').fadeIn();
    },
    mouseleave: function() {
        $('#hidden').fadeOut();
    }
}, ".testing");

documentは常に検出され、常に存在し、イベントリスナーがそれに追加されます。最後のセレクターは、イベントに適格な要素を除外します。

于 2012-08-12T21:50:40.840 に答える
1

hoverハンドラーをバインドするときtesting、ドキュメントにのクラスを持つ要素がないため、イベントを委任する必要があります。onメソッドを使用できます。次のことを試してください。」

$(document).on('mouseenter', '.testing', function(e) { 
        $('#hidden').fadeIn(); 
});

$(document).on('mouseleave', '.testing', function(e) { 
        $('#hidden').fadeOut(); 
});
于 2012-08-12T21:47:23.133 に答える