0

有一个包含 URL 列表的页面，

当用户单击其中一个 URL 时，将打开一个带有元素列表的 JQuery 模式弹出窗口。列表中的项目是通过 AJAX 调用动态添加的。

列表中的每个项目都有 Raty 和 timeago（两个 JQuery 插件）{“5 星评级，2 个月前”}。

现在的问题是 - 通常我们在 Document.ready 事件中在页面加载时执行与这些插件相关的 JavaScript 函数。

但是，现在需要在添加项目并准备好处理后执行这些功能。

要处理的事件的名称是什么？

编辑：-

更简单的可视化方法是：当我们在 StackOverlow 上为任何问题添加评论时；我们可以看到“5 分钟前添加”。这部分计算时间和显示“时间前”由“时间前”插件处理。必须在添加元素时执行某些函数（timeago）（在 StackOverflow 的情况下为注释）。现在我想知道的是在向 Dom 树添加新元素时执行该函数的一些句柄。

4

3 回答 3

1

您可以使用 jQuery on事件委托来动态添加元素。

$(document).on('click', '.classname', function(){

});

委托活动

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要，参考.

于 2013-08-20T06:22:25.503 回答
0

这是一个简单的模式。不需要插件...

var _eventTimer;


function updateWithAjaxCall(){

    stopEvents();

    $.ajax({
        //...
    })
    .fail(){
        //...
        resumeEvents();
    }
    .done(){
        //...

                    // reset your time ago here...
        $("#time-ago").text(0);
        resumeEvents();
    };
}



function refreshTimeAgo(){

    stopEvents();

    // update your time ago here...
    $("#time-ago").text($("#time-ago").text + 1);

    resumeEvents();

}

function resumeEvents() {
    clearTimeout(_eventTimer);
    _eventTimer = setTimeout(function () { refreshTimeAgo() }, 60000);
}

function stopEvents() {
    clearTimeout(_eventTimer);

}
于 2013-08-20T07:46:26.027 回答
0

jQuery 上

如果您确定将动态添加链接的父级将在 DOM 就绪时出现，您可以这样做

$('#parent_container').on('click', '.className', function(){

})

否则，您可以像这样附加到文档

 $(document).on('click', '.className', function(){

 })
于 2013-08-20T06:26:56.980 回答