代码之家 › 专栏 › 技术社区 › harunB10

引导程序弹出内容不工作

twitter-bootstrap html jquery javascript

harunB10 · 技术社区 · 6 年前

我有一个按钮可以触发弹出窗口。它是由另一个脚本生成的。

$('appendTarget').append('<div class=“col-md-3”style=“border:2px solid grey;border radius:12px;padding:5px;margin-bottom:10px;“>'+item.name+
'lt;/DIV>''+
'<div class=“col-md-3”><button class=“btn”style=“margin-bottom:10px”onclick=“showPopover(this)”><b style=“color:red”><img src=“img/gear.png”style=“width:20px;height:20px”></b>/lt;/button>');
这是我的触发功能:

函数showPopover(element){
$(元素).popover({
HTML:是,
内容:函数()。{
$('popoover content').append('<a href=“”class=“btn btn secondary”>编辑</a>'
+'<a href=“”class=“btn btn info”>激活</a>'
+'<a href=“”class=“btn btn danger”>删除</a>');
}
})(二)
}
以及popoover contentis this:。


<ul id=“Popover content”class=“list group”style=“display:none”>
</ul>
但它不起作用。但是,如果我将此链接直接添加到<ul>it works.但是我想动态地添加它,这样我可以为每个链接(按钮)分配ID。


有人吗?在这种情况下,为什么append不起作用?

编辑


@AREX有一个很好的观点,那就是display:nonestate was not changed.我改变了我的功能,看起来像这样:


函数showPopover(element){
$(元素).popover({
HTML:是,
内容:函数()。{

var popoover=$('poover content');

popover.show();

popover=popoover.append('<a href=“”class=“btn btn secondary”>编辑</a>'
+'<a href=“”class=“btn btn info”>激活</a>'
+'<a href=“”class=“btn btn danger”>删除</a>');
返回Popover;
}
})(二)
}
它起作用但很奇怪…

当我第一次单击时,看起来一切都很好:


之后,当我试图关闭这个弹出窗口时,它会扩展(加倍)内容:



最后,当我再次尝试打开它时,它显示空的popover:/。



编辑2


我添加了popover.empty()and it works..但当我打开和关闭Popover 2-3次时,它就会变空。这开始让人恼火。-


.


这是我的触发功能:

function showPopover(element) {
    $(element).popover({
        html: true,
        content: function() {
            $('#popover-content').append('<a href="#" class="btn btn-secondary">Edit</a>'
                                        +'<a href="#" class="btn btn-info">Activate</a>'
                                        +'<a href="#" class="btn btn-danger">Delete</a>');
        }
    });
}


以及popover-content这是:

<ul id="popover-content" class="list-group" style="display: none">
</ul>


但它不起作用。但是,如果我将此链接直接添加到<ul>它起作用了。但是我想动态地添加它,这样我可以为每个链接(按钮)分配ID。

有人吗?在这种情况下,为什么append不起作用?

编辑

@阿瑞克斯有一个很好的观点display:none状态没有更改。我改变了我的功能,看起来像这样:

function showPopover(element) {
    $(element).popover({
        html: true,
        content: function() {

            var popover =  $('#popover-content');

            popover.show();

            popover = popover.append('<a href="#" class="btn btn-secondary">Edit</a>'
                                        +'<a href="#" class="btn btn-info">Activate</a>'
                                        +'<a href="#" class="btn btn-danger">Delete</a>');
            return popover;   
        }
    });
}


它很管用,但很奇怪…

当我第一次单击时,看起来一切正常:


之后,当我试图关闭该弹出窗口时,它会扩展(加倍)内容:



最后,当我再次尝试打开它时,它显示空的popover:。/



编辑2

我添加了popover.empty()它起作用了……但当我打开和关闭Popover 2-3次时,它就会变空。这开始让人恼火。-

2 回复 | 直到 6 年前

Ravi Maniyar 6 年前

我创造了 this 为你拉小提琴。这应该对你有帮助。

HTML:

<div id="appendTarget"></div>

<ul id="popover-content" class="list-group" style="display: none">
</ul>

jquery:查询:

var isMyPopoverShown = false;

function myPop(element) {
  if(isMyPopoverShown === false) {
    $(element).popover({
        html: true,
        content: function() {
            $('#popover-content').html('<li><a href="#" class="btn btn-secondary">Edit</a></li>'
            +'<li><a href="#" class="btn btn-info">Activate</a></li>'
            +'<li><a href="#" class="btn btn-danger">Delete</a></li>');
            return $('#popover-content').html();
        }
    });
  }  
  $(element).popover('toggle');
}

jQuery(document).ready(function() {
   $('#appendTarget').append('<div class="col-md-3" style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px;">Item' + 
    '</div>' +
    '<div class="col-md-3"><button class="btn" style="margin-bottom: 10px" onclick="myPop(this);" data-trigger="manual"><b style="color: red">Button</b></button></div>');

  $(".btn").on('shown.bs.popover',function(){
    isMyPopoverShown = true;
  });

});

Arex 6 年前

基本上,你在不断地追加 <a> 每次点击弹出窗口。改为这样做: 创建变量 i 并将其初始化为 i=1 (在onclick触发函数之外执行此操作,否则将继续重新初始化为1)。在你的功能内部检查 i==1 如果为真,则使用当前代码并将其递增1。否则,如果检查 我 可被2除,如果为真,则隐藏它, 否则--显示它。

        function showPopover(element) {
            if(i==1){
            $(element).popover({
                html: true,
                content: function() {

                    var popover =  $('#popover-content');

                    popover.show();i=i+1;

                    popover = popover.append('<a href="#" class="btn btn-secondary">Edit</a>'
                                                +'<a href="#" class="btn btn-info">Activate</a>'
                                                +'<a href="#" class="btn btn-danger">Delete</a>');
                    return popover;   
                }
            });
          }
        else if(i%2==0)
    {
       $(element).popover({
            html: true,
            content: function() {

                var popover =  $('#popover-content');

                popover.hide();i=i+1;


                return popover;   
            }
        });
    }
   else{
        $(element).popover({
        html: true,
        content: function() {

            var popover =  $('#popover-content');

            popover.show();i=i+1;


            return popover;   
        }
    });}
        }