当触发器点击时,Bootstrap 3工具提示表现得很糟糕。当手册'

时间:2014-12-04 13:42:36

标签: javascript jquery twitter-bootstrap-3

我变得疯狂,我试图理解Tooltip的行为,但没有成功。

1。第一个问题是当我尝试通过插件(按钮1)在点击事件中使用它时 - >如果你去Fiddle,你会发现每次点击都会调用'content'属性中的函数两次......为什么?

2。我想使用绑定到元素的工具提示(按钮2)并以manual模式显示它但是它根本不起作用...为什么?

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <br/>
            <a href="#" class="btn btn-success">I'm working! :-D</a>   <span class="badge b0">0</span>         
            <br/>
        </div>        
    </div>
    <div class="row">
        <div class="col-xs-12">
            <br/>
            <a href="#" class="btn btn-danger">I'm not working! :-(</a>   <span class="badge b1">0</span>         
            <br/>
        </div>
    </div>
</div>

JS

 var i = 0, j = 0; 

 $('.container').popover({
        selector: '.btn-success',
        html: true,
        placement: 'right',
        container: '.container',
        trigger: 'click',            
        content: function(){
            $('.badge.b0').text(j++);
            return 'test';
        }
  });

  $('.container').popover({
        selector: '.btn-danger',
        html: true,
        placement: 'right',
        container: '.container',
        trigger: 'manual',            
        content: 'test'
  });

  $('.container').on('click', '.btn-danger', function(){
        $('.badge.b1').text(i++);
        $(this).popover('show');            
  }); 

FIDDLE

2 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/gepbmonh/8/

$('#add').click(function () {
     addButton()
 })

var ind = 0;
// adding buttons
function addButton() {
     ind++;
     // creating button
     $button = $('<a href="#"></a>');
     $button.text('I\'m not working! :-( ' + ind);
     $button.addClass('btn btn-danger has_popover');
     $button.attr('data-html', 'true');
     $button.attr('data-placement', 'left');
     $button.attr('data-trigger', 'manual');
     $button.attr('data-content', 'test ' + ind);
     // creating badge  
     $span = $('<span class="badge b' + ind + '">0</span>');

     $wrap = $('<div></div>');   
     $wrap.append($button).append($span);

     // add to the stage
     $('#buttons').append($wrap);
}
//inclick event
$('.container').on('click', '.has_popover', function () {
     // find an appropriately badge
     $badge = $(this).parent().find('.badge');
     // get current value
     var i = $badge.text();
     i = parseInt(i);
     // increase for one
     i++;
     $badge.text(i);
     //showing popover
     $(this).popover('show');
});

答案 1 :(得分:0)

1)每次点击都不会调用两次,每次点击都会调用一次,但它也会计算使其消失的点击次数,只是文本只会更新每次点击。

2)我不太确定你的意思,你能否进一步解释,我会编辑我的帖子。