0

重複の可能性:
JQuery アンバインドしてからバインドする

ホバー時にアニメーションを実行する機能があります（mouseenter、mouseleave）。ボタンをクリックした後、関数のバインドを解除しようとしています (ユーザーが操作したくないため)。これは機能しますが、私が問題を抱えているのは、ホバー機能を再度バインドして、ユーザーがボタンを再度クリックすると、アニメーションとホバー効果が再び使用されるようにすることです。

これがこれを実装する正しい方法であるかどうかはわかりませんが、この件について何か助けが得られることを願っています. ありがとう。

4

2 に答える 2

3

通常、継続的にバインドを解除して再バインドすることは、最善の方法ではありません。必要以上の作業が必要です。

1つのオプションは、ホバーしたときに要素にクラスを設定し、他のコードが呼び出されたときにそのクラスの存在をチェックすることです。

$('.myelem')
    .on("mouseenter", function() {
        $(this).addClass("hovering");
    })
    .on("mouseleave", function() {
        $(this).removeClass("hovering");
    })
    .on("click", function() {
        if ($(this).hasClass("hovering") === false) {
            // run the code
        }
    });

クラスを追加する同様の方法がありますが、クラスを持たない要素で動作するようにセレクターが定義されるように、イベント デリゲート メソッドを使用して動作を制御します"hovering"。

$('.myelem')
    .on("mouseenter", function() {
        $(this).addClass("hovering");
    })
    .on("mouseleave", function() {
        $(this).removeClass("hovering");
    });

$("#container").on("click", ".myelem:not(.hovering)", function() {
    // run the code
});
于 2012-09-29T03:02:15.637 に答える
1

class要素が に反応しないようにする名前を使用した複数のブロッキング コンテキストのデモを次に示しmouseenter mouseleaveます。

<div class="highlight">
    Hover Me
    <button type="button">Stop Hoverable</button>
</div>
<div class="highlight">
    Hover Me
    <button type="button">Stop Hoverable</button>
</div>
<div class="highlight">
    Hover Me
    <button type="button">Stop Hoverable</button>
</div>

$('.highlight')
    .on('mouseenter mouseleave', function(){
        if (!$(this).is('canceled')) {
            $(this).toggleClass('hovered');
        }
    })
    .on('click', 'button', function(){
        $(this).parent().toggleClass('canceled');
    });​

http://jsfiddle.net/rRaPB/

これはそれを機能させる行です：

if (!$(this).is('canceled')) {
于 2012-09-29T03:27:44.730 に答える