0

こんにちは、メソッドを使用mouseoutしてmouseleaveいますが、両方とも機能していません。私はそれを修正しようとしましたが、解決策を見つけることができません。私のコードは問題ないように見えますが、エラーはありません。なぜ機能しないのか知りたいです。ここにコード例のリンクがあります

$(".chzn-select").chosen()
$(function(){
    $('a').click(function(){
        $('.mydiv').addClass('redbrd')
    })

    $('.redbrd').live('mouseover', function(){
        var htm= '<div id="mmt">some text</div>'
        $('body').append(htm)
    })
    $('.redbrd').live('mouseout', function(){
        $('#mmt').remove()
    })
})
4

3 に答える 3

3

フィドルページを見ると、この部分以外のコードの複雑さのために、マウスイベントの検出に問題がある可能性がありますが、これを使用すると、ほとんどの方法でそこに到達するはずです。

$(function() {
    $(".chzn-select").chosen();

    $('a').click(function() {
        $('.mydiv').removeClass().addClass('redbrd mydiv');// NOTE this is in case your other question comes into play with this one.
    });
    $('body').on('mouseenter', '.redbrd', function() {
       $('body').append('<div class="mmt">some text</div>');
    });
    $('body').on('mouseleave', '.redbrd', function() {
        $('.mmt').remove();
    });
});

編集：レビュー後、選択したものの後にページにliを追加します。

これはそれで動作するはずです：

$(".chzn-select").chosen();
$(function() {
    $('a').click(function() {
        $('.mydiv').addClass('redbrd');

        $('.redbrd').on('mouseover', 'li', function(e) {
            var $target = $(e.target);
            if ($('#mmt').length === 0) {
                var htm = '<div id="mmt">' + $target.text() + ' some text</div>';
                $('body').append(htm);
            }
        });
        $('.redbrd').on('mouseout', function() {
            $('#mmt').remove();
        });
    });
});

ここでフィドルを更新しました：http：//jsfiddle.net/JtQHY/1/テストできるように。

于 2013-01-02T21:16:00.023 に答える
2

問題は、イベントが適切にバブリングしていないため、イベントが捕捉されていないことです。

ライブは、イベントの適切なバブリングに依存します。選択したプラグインがバブリングを壊すと思います

これを試して：

$(".chzn-select").chosen()
$(function(){
    $('a').click(function(){
        $('.mydiv').addClass('redbrd')

        $('.redbrd').live('mouseover',function(){
            if($('#mmt').length == 0){
                var htm= '<div id="mmt">some text</div>';
                $('body').append(htm);        
            }    

        }); 
        $('.redbrd').live('mouseout',function(){
            $('#mmt').remove();
        });          


    })        
})

css を追加すると:

.mydiv{padding:10px;}

これにより、マウスオーバーしている div が十分に大きくなり、すぐに出入りすることができなくなります。現在の例でこれが機能していることを確認するには、select と div の間にある非常に小さな空白に div を「入力」するまで、赤い境界線の右下隅にゆっくりと近づきます。それから動き出します。期待どおりに動作することがわかります。

私が言及した変更をフィドルに追加しました。あなたはそれがそこで働いているのを見ることができます。

于 2013-01-02T20:01:53.550 に答える
0

mouseoverライブを使用してイベントを関数にバインドする代わりに、とのjQueryメソッドを使用しましたmouseout。この例では、マウスがに入ると表示され、を離れると非表示になるspanを含む内に設定します。divdivdiv

spanを使用したい任意の要素に変更し、必要に応じてCSSでスタイル/配置することができます。

これはあなたの問題に対する実行可能な解決策ですか？

http://jsfiddle.net/Dpp8a/4/

于 2013-01-02T19:23:37.700 に答える