jQuery timeago not always working

Question

i have this source, that write the time ago. (i use timeago plugin of jQuery)

<script>
$(document).ready(function() {
    $("abbr.timeago").timeago();
});

function timeago(time) {
    isoTime = new Date();
    isoTime.setTime(time);
    return "<abbr class='timeago' title='"+isoTime.toISOString()+"'></abbr>";
}


function add() {
     $('#ex').append( timeago(time) );
}
</script>

when i try to call to add() function, its not always work.

this is works good:

<script>
add();
</script>

but when i try to call it from a button, its not work:

<button onclick='add()'>button</button>

---

i think its not work becouse this line $("abbr.timeago").timeago(); could not read the new <abbr> that i add. (maybe it could read just the <abbr> that added before this line $("abbr.timeago").timeago(); act)

someone have an idea how to solve it?

Answer 1

Try removing the $(document).ready(..) block and instead define add() as follows:

function add() {
     $('#ex').append( $(timeago(time)).timeago() );
}

As a side note, it's probably best to avoid giving a global function the same name as a jQuery method being used here. function timeago(.. could be function newElFromTime(time)

You might even modify it to return a jQuery object which you invoke the .timeago() method on instead of a plain HTML string:

function newTimeagoFromTime(time) {
    isoTime = new Date();
    isoTime.setTime(time);
    return $("<abbr class='timeago' title='"+isoTime.toISOString()+"'></abbr>").timeago();
}

function add() {
     $("#ex").append(newTimeagoFromTime(time));
}