Question

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

基本上我想用点击事件来显示弹出框，但是当发射点从鼠标中失去焦点时，弹出窗口就会被隐藏。

以下是来自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");

});

有什么想法吗？

Answer 1

以下情况应该有效。

$('.knownissue').mouseleave(function() {
    $(this).popover('hide');
});

Answer 2

这是一个我称之为“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.

我可以在带有mouseout事件的点击事件后切换弹出窗口吗？

2 个答案: