Bootstrap popover 重复一个动作/事件两次？

Question

为什么 Bootstrap 的弹出框重复一个动作两次？例如，我想通过ajax 在弹出框的data-content 中提交一个表单。它重复所有表单数据两次，帖子表单两次。

知道我能做些什么吗？

jquery + 引导，

$('.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

这是因为 popover.content 检查工具提示是否为空。

一个简单的解决方法是向弹出框添加一个标题属性。

$('.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

Answer 2

我认为你需要防止提交按钮的默认事件

$(".btn-submit").click(function(e){
    e.preventDefault();
    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;
});

Answer 3

这可能是一个旧帖子，但我要把我的工作留在这里。

我正在使用引导程序 3.3.5。

所以问题在于，每次执行“popover('show')”时，Bootstrap 都会调用渲染函数两次，只有第二次调用才是真正渲染弹出窗口的那个。

我的解决方法是为第一次调用返回一个简短的 html 字符串，而对于第二次调用，我让运行整个渲染函数：

jQuery('.bootstrap-popover-method').popover({
    html: true,
    trigger: 'manual',
    content: function(){//This is our rendering function for the popup's content
        var __G_bs_popover_shown= jQuery.data(jQuery('body')[0], '__G_bs_popover_shown');

        //Create a global variable, attached to the body element, to keep track of the repeating calls.
        __G_bs_popover_shown= (typeof __G_bs_popover_shown == 'undefined') ? 1 : (__G_bs_popover_shown + 1) % 2;
        //Update the global var
        jQuery.data(jQuery('body')[0], '__G_bs_popover_shown', __G_bs_popover_shown);
        //return a short string on every first call (this will not be rendered, anyway)
        if(__G_bs_popover_shown == 1) return '<div>BLANK</div>';//==>this should not be an empty string!

        //PLACE YOUR CODE HERE, E.G. AJAX CALLS, ETC..
        //DON'T FORGET TO RETURN THE HTML FOR THE POPUP'S CONTENT!
    }
  });

Answer 4

$('.bootstrap-popover-method').off('shown.bs.popover')
                                      .on('shown.bs.popover', function (e) {
      e.preventDefault();
    }

//取消绑定你的提交按钮点击

$(".btn-submit").off('click').on('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;
    });