Bootstrap Popover с добавленной закрытой формой формы формы также

Question

Как вы можете видеть в этом jQuery, у меня есть Boostrap Popover, который может закрыть внешний клик, а также щелкнуть по значку «x».

Однако, если этот popover помещен в форму, он также отправляет форму.

Есть ли способ получить функциональность этого закрываемого popover без отправки формы после щелчка?

HTML:

<form action="quote-calculator.php" method="post"> 
    <div class="bs-docs-example" style="padding-bottom: 24px;"> 
     <a href="#" class="more-info btn btn-large btn-danger" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a> 
    </div> 
</form> 

JQuery:

 var isVisible = false; 
     var clickedAway = false; 

     $('.btn-danger').popover({ 
       html: true, 
       trigger: 'manual' 
      }).click(function(e) { 
       $(this).popover('show'); 
      $('.popover-content').append('<button class="close" style="position: absolute; top: 0; right: 6px;">&times;</button>'); 
       clickedAway = false 
       isVisible = true 
       e.preventDefault() 
      }); 

     $(document).click(function(e) { 
      if(isVisible & clickedAway) 
      { 
      $('.btn-danger').popover('hide') 
      isVisible = clickedAway = false 
      } 
      else 
      { 
      clickedAway = true 
      } 
     }); 

Answer 1

Изменить свой элемент кнопки на элемент крепления.

http://jsfiddle.net/LRCNm/8/

$('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">&times;</a>'); 
        clickedAway = false 
        isVisible = true 
        e.preventDefault() 
       }); 

Answer 2

Вам нужно добавить preventDefault() здесь:

 $(document).click(function(e) { 
      if(isVisible & clickedAway) 
      { 
      $('.btn-danger').popover('hide') 
      isVisible = clickedAway = false 
      e.preventDefault() 
      } 
      else 
      { 
      clickedAway = true 
      } 
     });