以编程方式更改 bootstrap 弹出窗口颜色

Question

我尝试在以编程方式创建的 div 上以编程方式创建弹出窗口 - 这工作正常...但是当我尝试更改弹出窗口内文本的颜色时，我遇到了障碍是我的代码：

html:

<input type="text" class="inp"/>
<input type="button" class="but" value="press me"/>
<div id="append_area">
</div>

js:

$(".but").click(function(){

       var divv = $("<div class='append'>"+$(".inp").val()+"</div>");
      $("#append_area").append(divv);
          $(divv).popover({
              html:true,
              content:"<div class='pop'>"+$(".inp").val()+"</div>",
              placement :"right",
              trigger:"hover"
          });
          if($(".inp").val()=="red"){
             $(".pop").css("color","red");
            }


      });

非常感谢帮助者...

jsfiddle 示例：here

Answer 1

勾选这个fiddle

您需要将回调添加到 bootstrap 弹出窗口，请参考此 link

js:

var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
    showPopover.call(this);
    if (this.options.showCallback) {
        this.options.showCallback.call(this);
    }
}

$(".but").click(function(){

           var divv = $("<div class='append'>"+$(".inp").val()+"</div>");
          $("#append_area").append(divv);
              $(divv).popover({
                  html:true,
                  content:"<div class='pop'>"+$(".inp").val()+"</div>",
                  placement :"right",
                  trigger:"hover",
                  showCallback: function(){
                   if($(".inp").val()=="red"){
                     // alert("dcd");
                     $(".pop").css("color","red");
                    }
                  }
              });



          });

以编程方式更改 bootstrap 弹出窗口颜色

changing bootstrap popover color programmatically

javascript

jquery

popover

twitter-bootstrap