jQuery .text() function not working

Question

So I am trying to have user click a button the buttons value holds a question number and a div id. I am then trying to use that question number to access text that is in a span that has the id question_no"+_text. I the line that should get the text is:

var text=$("div#"+div+" span#"+question_no+"_text").text();

The problem is it is working half the time. It will grab the text on some spans but not on others.

HHere is the script I wrote:

$("button.add_answer").click(function() {
    var question_no=$(this).attr("value")
    var div=$(this).attr("data-version");
    var text=$("div#"+div+" span#"+question_no+"_text").text();
    var answer=$("div#"+div+" [name="+question_no+"]");
    var answerText;
    var answerValue;
    var checkbox=false;

    alert($("div#"+div+" span#"+question_no+"_text").length);

    if (answer[0].tagName.toLowerCase() == "input") {
        if(answer.attr("type") == "text") {
             answerText=answer.val();
             answerValue=answer.val();  
        } else if (answer.attr("type") == "radio") {
             var answer=$("div#"+div+" [name="+question_no+"]:checked");
             answerValue=answer.val();
             answerText=answer.next().text();
        } else {
             alert("checkbox");
             checkbox=true;
             $("div#"+div+" [name="+question_no+"]:checked").each(function() {
                 answerText=$(this).next().text();
                 answerValue=$(this).val();
                 $("div#saved_answers table").append("<tr id=\""+question_no+"\"><td>"+text+"</td><td>"+answerText+"</td></tr>");
             });    
        }
    } else if (answer[0].tagName.toLowerCase()=="textarea") {
         answerText=answer.val();
         answerValue=anser.val();   
    } else if(answer[0].tagName.toLowerCase == "select") {
         answerText=answer.find("option:selected").text();
         answerVal=answer.val();    
    }

    if(!checkbox) {
        $("div#saved_answers table").append("<tr id=\""+question_no+"\"><td>"+text+"</td><td>"+answerText+"</td></tr>");
    }

});

And here is the markup:

<div id="1527" class="Questions">
<h1>Questions</h1><hr><br />


    <ul class="error" id="498_error"></ul>
    <span id="498_text">Title of Representative Completing This Section</span><br />
    <input type="hidden" name="498_max_length" id="498_max_length" value="25">
    <input type="hidden" name="498_min_value" id="498_min_value" value="">
    <input type="hidden" name="498_max_value" id="498_max_value" value="">
    <input type="hidden" name="498_regex_format" id="498_regex_format" value="">
    <input type="hidden" name="498_system_type" id="498_system_type" value="2">
    <input type="hidden" name="498_app_type_version" id="498_app_type_version" value="1527">

            <input class="questionChoice" type="text" name="498" />

    <br />
    <button class="add_answer" value="498" data-version="1527">Add answer</button>
    <br /><br />


    <ul class="error" id="2150_error"></ul>
    <span id="2150_text">Signature:</span><br />
    <input type="hidden" name="2150_max_length" id="2150_max_length" value="">
    <input type="hidden" name="2150_min_value" id="2150_min_value" value="">
    <input type="hidden" name="2150_max_value" id="2150_max_value" value="">
    <input type="hidden" name="2150_regex_format" id="2150_regex_format" value="">
    <input type="hidden" name="2150_system_type" id="2150_system_type" value="2">
    <input type="hidden" name="2150_app_type_version" id="2150_app_type_version" value="1527">

            <input class="questionChoice" type="text" name="2150" />

    <br />
    <button class="add_answer" value="2150" data-version="1527">Add answer</button>
    <br /><br />

</div>

It is correctly grabbing the text from the second question, Signature, but not the first question, Title of Representative Completing This Section.

After the text is grabbed along with the input I am just putting them in a table.

Any ideas on why this would only grab the text every once in while?

Answer 1

Since, you know the span is a direct child of the div, maybe you could use the " > " to make it a direct descendant selector instead of a generic descendant selector.

var text=$("div#" + div + "> span#"+ question_no + "_text").text();

Answer 2

One of the buttons has attribute 'data-version' the other has 'data-app_type_version'. They should be the same as what you reference in your JS ('data-version' at the moment) :)