javascript - 我怎样才能使这项工作与动态生成的内容一起工作？

Question

我尝试过使用 this question 的解决方案显示分数。问题是我不知道如何制作它，以便它可以处理动态生成的分数。这是 jQuery 代码块:

$(document).ready(function() {

    $('#main').on('click', '#startButton', function () {
        $('#startButton').hide();
        $('#main').html('<div class="progress">progress</div><hr><div class="questions"><span class="fraction">1/2</span></div><hr><div class="answers">answers</div>');
    });

    $('.fraction').each(function(key, value) {
        $this = $(this);
        var split = $this.html().split("/");
        if(split.length == 2){
            $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>');
        }    
    });

});

我意识到 .each() 函数不起作用，因为它将一个对象传递到 #main 中。 这是一个jsfiddle说明我的问题。点击“开始按钮占位符”查看分数

Answer 1

您可以在onclick中添加每个函数来调用。

$(document).ready(function() {

    $('#main').on('click', '#startButton', function () {
        $('#startButton').hide();
        $('#main').html('<div class="progress">progress</div><hr><div class="questions"><span class="fraction">1/2</span></div><hr><div class="answers">answers</div>');

        $('.fraction').each(function(key, value) {
        $this = $(this);
        var split = $this.html().split("/");
        if(split.length == 2){
            $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>');
        }    
    });

    });



});

这是 fiddle - http://jsfiddle.net/sentmca/kj6Us/