How to raise a jquery event when an element with some class is created dynamically

Question

Is it possible to raise a jquery event when an element with a certain class is created dynamically? This is what I mean. I have the following;

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

Using jquery ajax, I'm retrieving several rows from the server and appending them to the "lotoContent" div. Each row has an empty span element that looks like this

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

The value of the data-date attribute is a unix time-stamp retrived from the database. Once the rows are added, the following javascript function is called;

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
}

This works fine, but I was wondering if there is a way to automatically call processDateTimes() when the date spans are created instead of manually calling the function after they are created. Something like this is what I have in mind;

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

Thanks.

Answer 1

The word you may be looking for is observables . In essence, when the DOM (or in this situation a span element) is updated you'd like to trigger an event.

For that answer I'd like to direct your attention to this response,

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

Ken illustrates that capturing all DOM changes at the top will allow you to pick and choose what do to on certain inner elements.

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

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

 });

You could certainly clean this up... you don't need to check for the class like I am... but I hope that helps you get going in the right direction.

Answer 2

can you not give the new rows a class of "new" when the ajax populates them and change the function processDateTimes() to run on items with the class of "new" and then remove the class once it's done its thing.

finally invoke the function at the end of your ajax call (complete) ?

$.ajax( ... ,
  success: function() {
    // add your element and give it a class of "new"
  },
  complete: function() {
    // then run your process function:
    processDateTimes();
  }
);

// this will only run on "new" items added
function processDateTimes() {

  $('.lotoDateTime.new').each(function() {
    var timeStamp = $(this).data('date');
    $(this)
      .text(getDateTimeFromServerUnixTimeStamp(timeStamp))
      .removeClass('new');

  });

}