0

I want to make a small survey. I want that the user has to answer some questions. A new question is fading in after clicking an answer. But this only works one time, because the new question which was on display:hidden before is not in the DOM I think. So I need to refresh the DOM I think?

Here is an example: http://jsfiddle.net/x2yu6tvw/

qstnNo = $('.question').data('id');

$('.answer').on( 'click', function(){
    $('.question[data-id="' + qstnNo + '"]').fadeOut(800, function(){
        nextQstn = qstnNo+1; 
        $('.question[data-id="' + nextQstn + '"]').delay(300).fadeIn(300);

    });
});

What can I do that jQuery listen also to the new added element?

iMax
  • 437
  • 6
  • 17

1 Answers1

2

Here is the working demo.

JS

$('.answer').on( 'click', function(){
    qstnNo = $(this).parent('div').data('id');
    $('.question[data-id="' + qstnNo + '"]').fadeOut(800, function(){
        nextQstn = qstnNo+1; 
        $('.question[data-id="' + nextQstn + '"]').delay(300).fadeIn(300);

    });
});

ISSUE: qstnNo value was not correct in your case. That should be dynamic not fixed.

Deepak Biswal
  • 4,027
  • 2
  • 17
  • 36
  • Ah ok. Thank you. I will try it in my case. What do you mean with "That should be dynamic not fixed"? – iMax Aug 19 '15 at 11:53
  • This is what you have done in very first line `qstnNo = $('.question').data('id');`. So that value is always 1, because it's not in the loop. But as per my changes it will be 1, 2, 3 and so on... – Deepak Biswal Aug 19 '15 at 11:55
  • Thank you! So I was wrong and jQuery has also hidden elements in the DOM? This works perfect. I will accept the answer :) But I have to wait 3 more minutes :) – iMax Aug 19 '15 at 11:57
  • Yes! Hidden means not visible to user but present in DOM. So you can toggle it display property whenever you want! – Deepak Biswal Aug 19 '15 at 11:58