Question

I want to select span which is bild at run time using jquery
Here’s the resulted code

<div id="phases">
 <div>
    <span class="phaseTimer">test</span>
 </div>
  <div>
     <span class="phaseTimer">test</span>
 </div>
 <div>
    <span class="phaseTimer">test</span>
</div>
  <div>
 <span class="phaseTimer">test</span>
 </div>
</div>

I use this jquery selector inside $.each to select the span

   $("div#phases div:nth-child("+(index+1)+") span.phaseTimer").text("Not started yet");

here’s the example I want to make , but the selector is not correct!
http://jsfiddle.net/jaVB9/3/

EDIT
Here’s the scenario of the problem I face

http://jsfiddle.net/jaVB9/6/

Answer 1

It is because you are trying to find the element before it is added to the DOM. I have fixed it in your fiddle take a look. Also you don’t need a selector for that, you can just set the text while creating the required markup.

    var allPhases="";

    $.each(phasesData,function(index){
        var startDate = new Date(phasesData[index].startDate);
        var endDate = new Date(phasesData[index].endDate);

        if(phasesData[index].isCurrent=="true"){
            var elapsed_seconds =endDate-startDate;
            allPhases+="<div><span class=\"phaseTimer\">test</span></div>";
            setInterval(function() {
                elapsed_seconds = elapsed_seconds - 1000;
                $("div#phases div:nth-child("+(index+1)+") span.phaseTimer")
                .text(getElapsedTimeStrFormat(elapsed_seconds))
            }, 1000);
        }
        else if(phasesData[index].isCurrent=="false"){
            allPhases+="<div><span class=\"phaseTimer\">"+startDate+"</span></div>";
        }
    });


$("div#phases").html(allPhases);

http://jsfiddle.net/jaVB9/9/