我有一个使用Ajax更新自己的日历。这似乎几乎是瞬间发生的——它从11月切换到12月的速度如此之快,以至于你看不到切换。这是执行此操作的代码,它恰好通过PHP包含在页面中,因此脚本位于文档中间。(我没有写这个脚本)
<script type="text/javascript">
var homegraphurl = '?content_type=plugin&block_id={$block_id}&date=';
if (document.all) {
this.homegraphxml = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!this.homegraphxml && typeof XMLHttpRequest != 'undefined') {
try {
this.homegraphxml = new XMLHttpRequest();
} catch (e) {
this.homegraphxml = false;
}
}
function homegraphcal_load(date) {
this.homegraphxml.open("GET", homegraphurl + date, true);
this.homegraphxml.onreadystatechange = function() {
if (homegraphxml.readyState == 4) {
calElem = document.getElementById('homegraphcal');
calElem.innerHTML = homegraphxml.responseText;
}
};
this.homegraphxml.send(null);
}
homegraphcal_load('2013-12-01');
</script>
然后页面上还有另一个脚本,它显示在结束正文标记之前,它将悬停引导弹出添加到日历中的链接(我确实写了这个脚本)
<script type="text/javascript">
$(document).ready(function(){
$(document).on("hover","a.evtday",function(g){
$(this).popover({
html: true,
animation: false,
trigger: 'hover',
placement: 'top',
content: function(){return '<img class="popsmall" src="'+ $(this).data('img') + '" /><br/><span class="winner">Winner: '+ $(this).data('item') + '</span>';}
});
});
});
</script>
问题是,当你第一次将鼠标悬停在链接上时,弹出窗口不会出现。然而,在那之后,它就像冠军一样发挥作用。是什么原因造成的?如何解决?我怀疑答案与脚本何时被调用以及按什么顺序调用有关,但我不确定如何解决这个问题。
您需要使用mouseenter事件。
同样的问题是,当第一个鼠标输入完成时,popover小部件还没有初始化。解决方案可以是在初始化后手动触发popover
$(document).on("mouseenter", "a.evtday", function (g) {
var $this = $(this);
if ($this.data('bs.popover')) {
return;
}
$(this).popover({
html: true,
animation: false,
trigger: 'hover',
placement: 'right',
content: function () {
return '<img class="popsmall" src="' + $(this).data('img') + '" /><br/><span class="winner">Winner: ' + $(this).data('item') + '</span>';
}
}).popover('show');
});
演示:Fiddle