Question

我有一个显示实时推特供稿的网页。

内容是一组具有类mlink的链接。

如果我点击链接，它会使用在OnClick事件上触发的jquery工具提示显示特定的推文详细信息 - 这非常有效。脚本1

在php脚本上使用Ajax每隔几秒就会不断更新内容 - 这也完美无缺。脚本2

我在页面上有第三个脚本，它与脚本1完全相同，但它使用了一个计时器而不是点击事件。同样，这完全适用于页面加载时加载的内容，但不适用于ajax生成的内容。脚本3

我知道我必须使用委托代替$（document）.ready来实现这个目的。但由于我的JQuery知识非常有限，我不知道如何做到这一点。任何帮助将不胜感激。

这是脚本3

<script>
$(document).ready(function() {

setInterval(function() {

    //Get ids of all links with class mlink and insert into array
    var IDs = [];
    $(".mlink").each(function(){ IDs.push(this.id); });

    //Select random element from array
    var item = IDs[Math.floor(Math.random()*IDs.length)];

    //Get attributes of item
    var xid = $('#'+item).attr('xid');
    var yid = $('#'+item).attr('yid');
    var zid = $('#'+item).attr('zid');
    var tcon = $('#'+item).attr('tcon');
    var imgcon = $('#'+item).attr('imgcon');
    var dtscon = $('#'+item).attr('dtscon');

    //Generate HTML
    var htmlstr = '';
    var htmlstr = htmlstr+'<div style="display: none; max-width: 600px; position: absolute;" class="ttx" id="'+xid+'">';
    var htmlstr = htmlstr+'<div class="row">';
    var htmlstr = htmlstr+'<div class="large-3 columns xicon" id="'+yid+'">';
    var htmlstr = htmlstr+'<img src="'+imgcon+'" />';
    var htmlstr = htmlstr+'</div>';
    var htmlstr = htmlstr+'<div class="large-9 columns xtcon" id="'+zid+'">';
    var htmlstr = htmlstr+'<h2>'+tcon+'</h2>';
    var htmlstr = htmlstr+'</div>';
    var htmlstr = htmlstr+'</div>';
    var htmlstr = htmlstr+'</div>';

    //Close any open tooltip
    $('.ttx').remove();

    //Append Generated content to body
    $('body').append(htmlstr);

    //Position Generated Content
    $('#'+xid).center();
    $(window).resize(function(){
        $('#'+xid).center();
    });

    //Show Generated Content
    $('#'+xid).toggle(function(){
        $('#'+zid).fadeIn('slow');
    });

    //Remove tooltip
    setInterval(function(){
        $('.ttx').remove();
    }, 1000 * 60 * 0.2);
}, 1000 * 60 * 0.1); 
});

//Centering function
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
    $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
    $(window).scrollLeft()) + "px");
    return this;
}
</script>

Answer 1

确保您的事件附加在不会被Ajax生成的内容替换的元素上，或者确保在通过Ajax生成内容后（重新）附加这些事件。

定时器功能对ajax生成的内容

1 个答案: