无法在动态加载的元素上应用 jquery 函数

Question

我正在使用名为 EmojiOne 的表情符号库，我正在使用其中一个示例中的以下代码将文本转换为表情符号，当我加载页面时它工作正常但是当一个新元素动态出现时它在我刷新页面之前对它们不起作用。我怎样才能让它在动态加载时工作？

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

这是示例的 link：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();

}

无法在动态加载的元素上应用 jquery 函数

Can't apply jquery function on dynamically loaded elements

html

javascript

jquery

emojione