How to use Yarp's jQuery timeago plugin with getjson&.html

Question

I tried some ways but no chance: http://timeago.yarp.com/

$(function() {
$('abbr.timeago').timeago();
    $('.more').click(function() {
    $.getJSON('http://127.0.0.1:9987/test/c.php?callback=?', function(datas){
                $.each(datas, function(i, data) {       

                    $('.fdiv2 .fdtl').html('<abbr class="timeago"></abbr');             
            });         
        });
    $('.fdiv2 .fdtl').slideToggle(1000);
});

});

Answer 1

You have to re-initialize timeago on the recently inserted element. Also cache what is cachable (no need to invoke $('.fdiv2 .fdtl') multiple times):

$(function() {
    var el = $('.fdiv2 .fdtl'); // cache the element
    $('abbr.timeago').timeago();
    $('.more').click(function() {
        $.getJSON('http://127.0.0.1:9987/test/c.php?callback=?', function(datas){
            $.each(datas, function(i, data) {
                el.html('<abbr class="timeago"></abbr>');
                el.find('abbr.timeago').timeago();
            });
        });
        el.slideToggle(1000);
    });
});

Also make sure that you really should iterate through datas - if it always contains one element in the array, you can replace $.each() call with var data = datas[0];. If it has more elements and you want to use only the last one (it looks like this is the case here, but you are not showing us the whole code), then you can replace it with var data = datas[datas.length-1]; (which will assign last element to data variable).

Answer 2

Try insert this line of code:

...
$('.fdiv2 .fdtl').html('<abbr class="timeago"></abbr');
$('abbr.timeago').timeago();
...