以编程方式更改bootstrap popover颜色

时间:2015-06-27 12:26:12

标签: javascript jquery twitter-bootstrap popover

我试图以编程方式创建一个以编程方式创建的div-pop-over工作正常...但是当我尝试更改pop-over中文本的颜色时,我遇到了一个路障,这里是我的代码:

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

1 个答案:

答案 0 :(得分:3)

选中此fiddle

您需要将Callback添加到bootstrap popover,请参阅此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");
                    }
                  }
              });



          });