DN0300 DN0300 - 5 months ago 16
HTML Question

Can't apply jquery function on dynamically loaded elements

I am using emoji library called EmojiOne , I am using the following code from one of their example to convert text to emojis, it works fine when I load the page but when a new element appears dynamically it doesn't work on them until I refresh the page. How can I get it to work on dynamically loaded ?

$(document).ready(function() {
$(".convert-emoji").each(function() {
var original = $(this).html();
var converted = emojione.toImage(original);
$(this).html(converted);
});
});


Here is the link to the example: http://git.emojione.com/demos/class-convert.html

Answer
$(document).ready(function() {
    doThing();
});

function doThing(){
    $(".convert-emoji").each(function() {
            var original = $(this).html();
            var converted = emojione.toImage(original);
            $(this).html(converted);
    });
}

function yourAppendFunction(){
    //here are you appending new element and the fire the function

    doThing();

}