jQuery对AJAX内容的影响延迟

jQuery effects on AJAXed content delayed

本文关键字：影响 延迟 AJAX jQuery      更新时间：2023-12-13

我有一个使用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

相关文章：