Question

I have a jsfiddle here which you can use to see a basic demo of my application and the problem I am having.

When you open fiddle please follow these steps below:

1. You will see an “Open Grid” link, click on the link and select either “True or False” or “Yes or No” buttons.
2. After selecting either of the buttons you will see their answer buttons appear underneath.
3. Please click on the “Add Question” button and this will appended a table row into the table underneath.
4. Now in the appended row is the problem. If you click on the “Open Grid” link within the appended row and select either of the buttons, you will realise that the corresponding answer buttons underneath disappears. They should be displayed not disappear.

So my question is that can anyone modify the demo so that they can get the corresponding answer buttons to appear within the appended row when the user clicks on the “Open Grid” link in the appended row?

I think the problem maybe within this code but I am not sure:

 var count = 0;
var plusbutton_clicked;
var gQuestionIndex = 0;

function insertQuestion(form) {

    var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;




    var $tbody = $('#qandatbl > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $td = $("<td class='extratd'>");
    var $options = $("<div class='option'>1. Option Type:<br/></div>");
    var $answer = $("<div class='answer'>3. Answer:<br/></div>");

    gQuestionIndex++;

    $('.gridTxt', context).each(function() {

        var $this = $(this);
        var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />").attr('name', $this.attr('name') + "[]").attr('value', $this.val()).appendTo($options).after("<span href='#' class='showGrid'>[Open Grid]</span>");

        $questionType = $this.val();

    });

    var $this, i = 0,
        $row, $cell;
    $('#optionAndAnswer .answers').each(function() {
        $this = $(this);
        if (i % 7 == 0) {
            $row = $("<tr/>").appendTo($answer);
            $cell = $("<td/>").appendTo($row);
        }
        var $newBtn = $(("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this, " + gQuestionIndex + ");' />").replace('%s', $this.is(':visible') ? 'inline-block' : 'none')).attr('name', "value[" + gQuestionIndex + "][]").attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id') + 'Row');
        $newBtn.appendTo($cell);

        i++;
    });



    $tr.append($td);
    $td.append($options);
    $td.append($answer);
    $tbody.append($tr);

    count++;

    $('#optionAndAnswer .answerBtns').hide();

    $('#optionAndAnswer .answerBtns').removeClass('answerBtnsOn').addClass('answerBtnsOff');

    updateAnswer($answer, gQuestionIndex);


}

Thanks

Answer 1

I think the main problems may be in insertQuestion().

As far as I can tell :

• $cell is defined conditionally but the line $newBtn.appendTo($cell); is unconditional. When the condition is not met, the append statement will fail silently (no error message).
• even on the occasions that the condition is met $newBtn is successfully appended to $cell, and $cell is appended to $row, but $row is never appended to anything. Consequently no newBtns will appear in the DOM.

Edit:

Try replacing :

    if (clickedNumber === 'True or False') {
        $(this).closest('.option').siblings('.answer').find('input[name="answerName[True]"]').show();
        $(this).closest('.option').siblings('.answer').find('input[name="answerName[False]"]').show();
    } else if (clickedNumber === 'Yes or No') {
        $(this).closest('.option').siblings('.answer').find('input[name="answerName[Yes]"]').show();
        $(this).closest('.option').siblings('.answer').find('input[name="answerName[No]"]').show();
    }

with :

var ans = $(this).closest('.option').siblings('.answer').find('input');
if (clickedNumber === 'True or False') {
    ans.filter('[value="True"], [value="False"]').show();
} else if (clickedNumber === 'Yes or No') {
    ans.filter('[value="Yes"], [value="No"]').show();
}