2

Estou com o seguinte código HTML:

<button class="thumb-hearth pop" data-toggle="popover" title="Likes" data-placement="top" data-trigger="focus" data-content="Teste">
     <i class="glyphicon glyphicon-heart"></i>
</button>

Com o seguinte JS:

$(document).ready(function(){
  $('.pop').popover().click(function() {
    setTimeout(function() {
      $('.pop').popover('hide');
    }, 1500);
  });
});

Porém, não apresenta nenhum resultado do meu popOver na ação de click (o DOM chega a receber uma alteração), mas o popover não aparece, e quando consulto o console, vejo o seguinte erro:

Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at a.MixItUp._processClick (mp-jquery.mixitup.min.js:14)
    at HTMLLIElement.<anonymous> (mp-jquery.mixitup.min.js:14)
    at HTMLLIElement.dispatch (mp-jquery.min.js:3)
    at HTMLLIElement.r.handle (mp-jquery.min.js:3)

Não faço ideia de onde pode estar o erro. O que poderia fazer para corrigir?

3
  • Consegui remover o erro, entretanto, o popover não aparece. 15/02/2017 às 3:09
  • Importou o bootstrap.min.js ? 15/02/2017 às 9:31
  • Sim! @VME, fiz a importação 15/02/2017 às 14:27

1 Resposta 1

2

A documentação informa que esse mecanismo (popover) não é automático. Vc precisa instanciar / inicializar (vide Opt-in functionality).

No snippet abaixo você vai ver $('[data-toggle="popover"]').popover(); no JavaScript, e é isso que está disparando a instância.

$(function () {
  $('[data-toggle="popover"]').popover();
  $('.pop').popover().click(function() {
    setTimeout(function() {
      $('.pop').popover('hide');
    }, 1500);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<br><br>
<button class="thumb-hearth pop" data-toggle="popover" title="Likes" data-placement="top" data-trigger="focus" data-content="Teste">
     <i class="glyphicon glyphicon-heart"></i>
</button>

5
  • Minha estrutura está exatamente igual a essa, entretanto o popover não aparece e apresenta o mesmo erro. 15/02/2017 às 14:27
  • Se vc se refere a Cannot read property, entenda: Como vc pode ver no snippet, se sua configuração estiver igual a da resposta não tem como aparecer esse erro. Se ele funciona aqui, tb funciona no seu ambiente. Provavelmente esse erro vem de outro script ou função que vc está carregando. 15/02/2017 às 14:40
  • Estou usando o jqueryMixitUp, será que pode existir um conflito? 15/02/2017 às 14:41
  • Vc vai ter que remover o jqueryMixitUp e testar. 15/02/2017 às 14:42
  • Estou injetando tudo dentro de uma li, usando o append. Veja como está: prnt.sc/e92qoa ... Quando eu clico no botão, ele cria uma alteração no DOM em ul e li (coloca inline). Mas não sei pq não aparece o popover. 15/02/2017 às 14:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .