javascript - Bootstrap popover repeats an action/ event twice?

Question

Why Bootstrap's popover repeats an action twice? For instance, I want to submit a form inside the popover's data-content via ajax. It repeats all the form data twice and the posts form twice.

Any idea what I can do about it?

jquery + bootstrap,

$('.bootstrap-popover-method').popover({
    placement: 'bottom',
    container: 'body',
    html:true,
    content: function () {
        var p = $(this);
        var data = $('#popover-content').html();
        $('#popover-content').remove();
        p.attr("data-content", data);
        p.popover('show');
    }
});

$('.bootstrap-popover-method').on('shown.bs.popover', function () {
    // do something…
    console.log(this); // I get twice of the button element <button class="btn btn-default bootstrap-popover-method"...>
    console.log($(".btn-submit").length); // I get twice of '1'.

    $(".link").click(function(){
        console.log($(this).attr("href")); // I get once of 'test.html'.
        return false;
    });

    $(".btn-submit").click(function(){

        console.log($(this).closest("form").attr("action")); // I get twice of '1.php'

        var form = $(this).closest("form");
        console.log(form.serialize()); // I get twice of 'username=hello+world!'

        $.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'

            type: "POST",
            url: form.attr("action"),
            data: $(this).serialize(), // serializes the form's elements.
            success: function(data){
                //alert(data); // show response from the php script.
            }
          });

        return false;
    });


});

bootsrap + html,

<button type="button" class="btn btn-default bootstrap-popover-method" data-title="body" data-container="body" data-toggle="popover" data-placement="bottom">
  Popover on bottom
</button>

<div id="popover-content">
    <a href='test.html' class="link">hello</a> 
    <form action="1.php" class="myform">
       <input type="text" name="username" value="hello world!"/>
       <input type="submit" value="submit" class="btn-submit"/> 
    </form>
</div>

Answer 1

This happens because popover.content checks if the tooltip is empty or not.

A simple fix would be to add a title attribute to popover.

$('.bootstrap-popover-method').popover({
    placement: 'bottom',
    container: 'body',
    html:true,
    title: "New Title",
    content: function () {
        var p = $(this);
        var data = $('#popover-content').html();
        $('#popover-content').remove();
        p.attr("data-content", data);
        p.popover('show');
    }
});

https://github.com/twbs/bootstrap/issues/12563#issuecomment-56813015