Question

在点击触发元素上的后续时间时，我似乎无法弄清楚如何不隐藏弹出窗口。

我有：

$('.vote').click(function() {
    $.post(ROOT + 'call', {call: 'Cake->vote'}, function(data) {
        $('.vote').attr('data-content', data.msg);
        if (!$('.popover').css('display'))
        {
            $('.vote').popover('show');
        }
    }, 'json')
})

HTML：

<img class="vote" width="32" src="/images/down_red_empty.png" data-placement="right" data-content="" data-html="true">

我试图隐藏它不起作用：

$(document).click(function(e) {
    if ($('.popover').has(e.target).length == 0 && $(e.target).is('.vote') === false) {
        $('.vote').popover('hide');
    }
});

似乎完全无视$(e.target).is('.vote') === false

Answer 1

请在此处查看工作示例：http://www.bootply.com/110602（它使用setTimeout代替$.post来电。）

代码的一些问题：

$('.vote').click实际上应该是$(document,'.vote').click。

当您手动切换弹出窗口时，应将img中的数据触发器标记设置为data-trigger='manual'。这意味着您可以控制使用弹出窗口单击项目时发生的情况，否则默认情况下会显示或隐藏弹出窗口。

最后，您应该使用.is('.vote')代替.hasClass('vote')，因为它是您用作条件的CSS类。

  $(document, '.vote').click(function() {
    $.post(ROOT + 'call', {call: 'Cake->vote'}, function(data) {
       $('.vote').attr('data-content', data.msg);
       if (!$('.popover').css('display'))
       {
           $('.vote').popover('show');
       }
    }, 'json')
  });

  $(document).click(function(e) { 
    if ($('.popover').has(e.target).length == 0 && !$(e.target).hasClass('vote')) {
        $('.vote').popover('hide');
    }
  });

和HTML：

<img class="vote" width="32" src="/images/down_red_empty.png" data-trigger="manual" data-placement="right" data-content="" data-html="true">

隐藏bootstrap popover排除目标元素

1 个答案: