javascript - 如何在动态创建具有某些类的元素时引发 jquery 事件

Question

是否可以在动态创建具有特定类的元素时引发 jquery 事件？这就是我的意思。我有以下内容；

...
<div id="lotoContent"></div>
...

使用 jquery ajax，我从服务器检索几行并将它们附加到“lotoContent”div。每行都有一个空的 span 元素，看起来像这样

<span class="lotoDateTime" data-date="123456"></span>

data-date 属性的值是从数据库中获取的 unix 时间戳。添加行后，将调用以下 javascript 函数；

function processDateTimes() {
   //process dates
    $('.lotoDateTime').each(function () {
        var timeStamp = $(this).data('date');
        $(this).text(getDateTimeFromServerUnixTimeStamp(timeStamp));
    });

}

function getDateTimeFromServerUnixTimeStamp(timeStamp) {
  //this function takes the unix time-stamp and converts it to Date and Time 
  // like 08/09/2013 12:09 based on the browser time
}

这工作正常，但我想知道是否有一种方法可以在创建日期跨度时自动调用 processDateTimes()，而不是在创建日期跨度后手动调用该函数。这就是我的想法；

$('#lotoContent').on('SomeEvent', '.lotoDateTime', function() {
  processDateTimes();
});

谢谢。

Answer 1

您可能正在寻找的词是可观察的。本质上，当 DOM(或在这种情况下为 span 元素)更新时，您希望触发一个事件。

对于这个答案，我想请您注意这个回复，

https://stackoverflow.com/a/240663/191006

Ken 说明，在顶部捕获所有 DOM 更改将使您能够挑选和选择对某些内部元素执行的操作。

$('body').change(function(event){

    if( $(event.target).hasClass("lotoDateTime") )
        processDateTimes();

 });

你当然可以清理它......你不需要像我一样检查类(class)......但我希望这能帮助你朝着正确的方向前进。