javascript - 動的に読み込まれた要素に jquery 関数を適用できません

Question

EmojiOneという絵文字ライブラリを使用しています。例の1つから次のコードを使用してテキストを絵文字に変換しています。ページをロードすると正常に動作しますが、新しい要素が動的に表示されると、更新するまで動作しませんページ。動的にロードされた上で動作させるにはどうすればよいですか?

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

例へのリンクは次のとおりです: http://git.emojione.com/demos/class-convert.html

Answer 1

このコードを関数に抽出し、必要な場所でこの関数を呼び出します...または間隔を設定します...

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

$(document).ready(refreshEmojis); //on page load

$("#someButtonId").on("click", function() { //click of some button
    //some action...
    refreshEmojis();
});

setInterval(refreshEmojis, 100); //each 100 milliseconds

Answer 2

$(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();

}