Скрыть загрузочный всплывающий элемент исключить целевой элемент

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">