jQuery's .on() for jQuery TimeAgo

Question

I'm looking for a way to trigger the .timeago() function on new $("abbr.timeago" elements inserted dynamically into the page. Right now this is what I'm doing.

# Triggered on initial page load

# application.js.coffee
jQuery ->
  # Timeago
  $("abbr.timeago").timeago()

Some elements are dynamically replaced, and I've found the need to call the timeago function on them after inserting them into the page.

# Triggered after the new abbr.timeago elements have been inserted

// resolve.js.erb

$tweet = $("<%= j render 'conversation_for_tweet', tweet: @tweet %>");
$("#<%= dom_id @tweet, :conversation_for %>").replaceWith($tweet);
$tweet.find("abbr.timeago").timeago();

Is there a way to bind to jQuery's .on function, so that dynamically inserted $("abbr.timeago") tags are automatically called .timeago() upon?

Related reading:

• Making a jQuery Plugin Work On a dynamically added element => seems as if jQuery timeago could be run before replacing the html, maybe to avoid some kind of flash.
• https://stackoverflow.com/a/2924202/1606888 => recomments binding to .on, but what event to bind to?
• http://www.quirksmode.org/dom/events/ => can't find an obvious event to bind to. is there any option?

Answer 1

on won't help with this. You can use on to bind an event handler to something which is always on the page so that an event can be triggered on an element not on the page at the time of binding. In this case, it's a little different.

I've solved this before by simply running $("abbr.timeago").timeago() again when I know things have changed.