Bootstrap popover 重复一个动作/事件两次? [英] Bootstrap popover repeats an action/ event twice?

问题描述

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

知道我能做些什么吗?

jquery + 引导程序，

$('.bootstrap-popover-method').popover({位置:'底部'，容器:'身体'，html:真，内容:函数(){var p = $(this);var data = $('#popover-content').html();$('#popover-content').remove();p.attr("数据内容", 数据);p.popover('show');}});$('.bootstrap-popover-method').on('shown.bs.popover', function () {//做一点事…控制台日志(这个)；//我得到了两次按钮元素 <button class="btn btn-default bootstrap-popover-method"...>console.log($(".btn-submit").length);//我得到两次1".$(".link").click(function(){console.log($(this).attr("href"));//我得到一次'test.html'.返回假；});$(".btn-submit").click(function(){console.log($(this).closest("form").attr("action"));//我得到两次 '1.php'var form = $(this).closest("form");console.log(form.serialize());//我得到两次 'username=hello+world!'$.ajax({//它两次发布到 'POST https://localhost/test/2014/css/bootstrap/1.php'类型:POST"，网址:form.attr(动作")，data: $(this).serialize(),//序列化表单元素.成功:功能(数据){//警报(数据)；//显示来自 php 脚本的响应.}});返回假；});});

引导程序 + html，

<button type="button" class="btn btn-default bootstrap-popover-method" data-title="body" data-container="body" data-toggle="popover" data-位置=底部">底部弹出框<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"/></表单>

解决方案

发生这种情况是因为 popover.content 检查工具提示是否为空.

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

$('.bootstrap-popover-method').popover({位置:'底部'，容器:'身体'，html:真，title: "新标题",内容:函数(){var p = $(this);var data = $('#popover-content').html();$('#popover-content').remove();p.attr("数据内容", 数据);p.popover('show');}});

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

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>

解决方案

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

这篇关于Bootstrap popover 重复一个动作/事件两次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！