0

クリックイベントでポップオーバーを表示するためにTwitterブートストラップを使用しています。クリックイベントで情報を要求していますが、フォーカスを失った後にポップオーバーを非表示にして、ユーザーが再度クリックする必要がないようにします。これは可能ですか？

基本的に、クリックイベントでポップオーバーを表示したいのですが、起動ポイントがマウスからフォーカスを失うと、ポップオーバーは非表示になります。

twitter-bootstrapからのポップオーバードキュメントへのリンクは次のとおりです：http ：//twitter.github.com/bootstrap/javascript.html#popovers

これは私が現在行っていることです：

jQuery：

$('.knownissue').on('click', function() {

    var el = $(this);

    if (el.data('showissue') == 'true') {
        el.popover('toggle');
        el.data('showissue', 'false');
        return;
    }

    $.post('functions/get_known_issues.php', function(data) {
       if (data.st) {
           el.attr('data-content', data.issue);
           el.popover('toggle');
           el.data('showissue', 'true');
       }
    }, "json");

});

何かご意見は？

4

2 に答える 2

1

以下はうまくいくはずです。

$('.knownissue').mouseleave(function() {
    $(this).popover('hide');
});
于 2012-11-08T20:02:10.887 に答える
0

これは、'clickoutside' と呼ぶカスタム jQuery イベントです。ターゲット要素の外側でマウスをクリックした場合にのみ発生します。他のイベント タイプ (mousemove、keydown など) にも簡単に適用できます。あなたの場合、起動するとモーダルを閉じることができます。

(function ($) {
    var count = 0;

    $.fn.clickoutside = function (handler) {
        // If the source element does not have an ID, give it one, so we can reference it
        var self = $(this);
        var id = self.attr('id');
        if (id === '') {
            id = 'clickoutside' + count++;
            self.attr('id', id);
        }

        // Watch for the event everywhere
        $('html').click(function (e) {
            var source = $(e.target);

            // ... but, stop it from propagating if it is inside the target 
            // element. The result being only events outside the target
            // propagate to the top.
            if (source.attr('id') == id || source.parents('#' + id).length > 0) {
                return;
            }

            handler.call(this, e);
        })
    };
})(jQuery);

 $('#targetElement').clickoutside(function(){ 
 });

編集: JSFiddle の例。

于 2012-11-08T20:05:40.147 に答える