Question

为什么Bootstrap的popover 重复两次动作？例如，我想通过data-content在邮件的ajax内提交表单。它重复所有表格数据两次，帖子形成两次。

知道我能做些什么吗？

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

我认为您需要阻止提交按钮的默认事件

$(".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 2

这可能是一个老帖子，但我要离开这里来解决问题。

我正在使用bootstrap 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 3

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

一个简单的解决方法是为popover添加title属性。

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

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

4 个答案: