1

I have tried using the solution of this question to display fractions. The problem is I don't know how to make it so that it will work on dynamically generated fractions. Here is the jQuery code block: 

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

});

I realize that the .each() function does not work because it is passing an object into #main. Here is a jsfiddle illustrating my problem. Click "placeholder for start button" to see the fraction

Community
  • 1
  • 1
timorthi
  • 41
  • 1
  • 4
  • Store the function in `each` and call it on your newly inserted nodes whenever you append new nodes. – Derek 朕會功夫 Feb 28 '14 at 03:59
  • whats the issue with just placing the $('.fraction') inside the on('click') function? – clancer Feb 28 '14 at 03:59
  • you can check for changes to the dom like explained here http://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div and then run the fraction code on anything you find – clancer Feb 28 '14 at 04:00
  • @clancer It never occurred to me to have the function nested inside the .on() function. Thank you, and for that extra link too! – timorthi Feb 28 '14 at 04:10

2 Answers2

0

You can add the each function inside onclick to invoke.

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

    });



});

Here is the fiddle - http://jsfiddle.net/sentmca/kj6Us/

Senthilmurugan
  • 383
  • 1
  • 14
0
$(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>');
        }    
    });
    });


});
YasirPoongadan
  • 683
  • 6
  • 19