javascript - クローズオプションが追加されたブートストラップポップオーバーもフォームを送信

Question

このjQueryでわかるように、「x」をクリックするだけでなく、外側のクリックでも閉じることができるBoostrapPopoverがあります。

ただし、このポップオーバーがフォーム内に配置されると、フォームも送信されます。

クリックしたフォームを送信せずに、この閉じることができるポップオーバーの機能を取得する方法はありますか？

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
          }
        });