如何使用動態生成的內容開展此項工作？

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>'); 
     }  
    }); 

}); 

我意識到。每（）函數不工作，因爲它是傳遞對象到#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>'); 
     }  
    }); 

    }); 



}); 

這裏是小提琴 - http://jsfiddle.net/sentmca/kj6Us/

Answer 2

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


});