0

我正在使用 twitter bootstrap 来显示带有点击事件的弹出框。我通过点击事件请求信息，但我想在它失去焦点后隐藏弹出框，这样用户就不需要再次点击它。这可能吗？

基本上我想用点击事件显示弹出框，但是当启动点失去鼠标的焦点时，弹出框被隐藏了。

这是来自 twitter-bootstrap 的 popover 文档的链接：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

这是一个自定义的 jQuery 事件，我称之为“clickoutside”。当且仅当您在目标元素之外单击鼠标时才会触发它。它可以很容易地适应其他事件类型（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 回答