我变得疯狂,我试图理解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');
});
答案 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)我不太确定你的意思,你能否进一步解释,我会编辑我的帖子。