Javascript 引导popover将一个操作/事件重复两次？

为什么Bootstrap的popover会重复一个动作两次？例如，我想通过

ajax

在popover的

数据内容中提交一个表单。它将所有表单数据重复两次，并将帖子表单重复两次

你知道我能做些什么吗

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


});

$（'.bootstrap-popover方法'）.popover({
位置：'底部'，
容器：'主体'，
是的，
内容：功能（）{
var p=$（本）；
var data=$（'#popover content'）.html（）；
$（“#popover内容”）.remove（）；
p、 attr（“数据内容”，数据）；
p、 爆米花（“秀”）；
}
});
$（'.bootstrap-popover-method'）.on（'show.bs.popover'，function（）{
//做点什么…
console.log（this）；//我得到两次按钮元素
console.log（$（“.btn submit”）.length）；//我得到两次“1”。
$（“.link”）。单击（函数（）{
console.log（$（this.attr（“href”））；//我得到一次“test.html”。
返回false；
});
$（“.btn提交”）。单击（函数（）{
console.log（$（this.closest（“form”）.attr（“action”）；//我得到了两次'1.php'
var form=$（this）.closest（“form”）；
console.log（form.serialize（））；//我得到两次“username=hello+world！”
$.ajax（{//it向'POST'发布两次https://localhost/test/2014/css/bootstrap/1.php'
类型：“POST”，
url:form.attr（“操作”），
数据：$（this）.serialize（），//序列化窗体的元素。
成功：功能（数据）{
//警报（数据）；//显示来自php脚本的响应。
}
});
返回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>


底上的府绸

//取消绑定提交按钮，然后单击

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

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

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

这可能是一个老帖子，但我会把我的工作留在这里

我使用的是Bootstrap3.3.5

因此，错误行为是，每次执行“popover（'show'）”时，引导程序都会调用呈现函数两次，只有第二次调用才是真正呈现弹出窗口的调用

我的解决方案是在第一次调用时返回一个短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!
    }
  });

jQuery（'.bootstrap-popover方法'）.popover({
是的，
触发器：“手动”，
content:function（）{//这是弹出窗口内容的呈现函数
显示的var=jQuery.data（jQuery（'body'）[0]，'；
//创建一个全局变量，附加到body元素，以跟踪重复调用。
__G_bs_popover_显示=（类型_G_bs_popover_显示='未定义'）？1:（_G_bs_popover_显示+1）%2；
//更新全局变量
数据（jQuery（'body'）[0]，'uuu G_bs_popover_show'，'uu G_bs_popover_show'，'uu G_bs_popover_show'；
//在每次第一次调用时返回一个短字符串（无论如何，这不会被呈现）
如果（uu G_bs_popover_show==1）返回“BLANK”；//=>这不应该是空字符串！
//将代码放在此处，例如AJAX调用等。。
//不要忘记返回弹出窗口内容的HTML！
}
});
发生这种情况是因为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');
    }
});

任何问题请解释！！！！这是你能提供更多细节的表单按钮吗？就目前而言，这个答案是相当无用的…哈哈。最糟糕的回答之一是NA。现在，我正在更新，因为我了解这个问题。希望对你们有用。
$('.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');
    }
});