Question

有一个包含网址列表的网页

当用户点击其中一个URL时，将打开一个JQuery Modal弹出窗口，其中包含元素列表。通过执行AJAX调用动态添加列表中的项目。

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

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

然而，现在需要在添加项目后执行这些功能＆amp;已准备好进行处理。

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

编辑： -

更容易想象的方法是：当我们在StackOverlow上的任何问题上添加评论时;我们可以看到“添加5分钟前”。这部分计算时间＆amp;显示'Time ago'由'Time Ago'插件处理。必须在添加元素时执行某些函数（timeago）（在StackOverflow的情况下为Comment）。现在，我想知道的是在向Dom Tree添加新元素时执行该函数的一些句柄。

Answer 1

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

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

});

委托活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序reference。

Answer 2

jQuery on

如果您确定将动态添加链接的父级将在DOM准备就绪，您可以

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

})

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

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

 })

Answer 3

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

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);

}

添加某些元素的JavaScript事件

3 个答案:

委托活动