1

I'm trying to submit form that were created through jquery, but I can't get submit event from this form. Here is my code, 

$('#get_test').click(function(){
    $.post('ajax-request.php',{   
        act: 'start_test'
    },function(data){ 
        var jstring = $.parseJSON(data);
        for(var i = 0 ; i < 5 ; i++){
            if (i == 0) {
                $('#test').append('<ul class="nav nav-pills"></ul>');
                $('.nav.nav-pills').append('<li class="active"><a data-toggle="pill" href="#home">' + (i + 1) + '</a></li>');
                $('#test').append('<form name="quiz_form" id="quiz_form" method="POST">');
                $('#test form').append('<div class="tab-content"></div>');
                $('.tab-content').append('<div id="home" class="tab-pane fade in active">'+'<p><b>Russian word: </b>' + jstring[i].russian_word + '</p></div>');
                $('#home').append('<input type="text" name="in_word'+i+'" placeholder=" Input translation" />');
            } else {
                $('.nav.nav-pills').append('<li><a data-toggle="pill" href="#menu' + i + '">' + (i + 1) + '</a></li>');
                $('.tab-content').append('<div id="menu'+i+'" class="tab-pane fade">'+'<p><b>Russian word: </b>' + jstring[i].russian_word + '</p></div>');
                $('#menu' + i).append('<input type="text" name="in_word' + i + '" placeholder=" Input translation" />');

                if (i == 4) {
                    $('#test form').append('<input type="button" name="check_button" value="Check" id="check_quiz"/>');
                }
            }
        }
    });
}); 

$('#quiz_form').submit(function() {
    alert('sdsdsdsd');
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Sanzhar Suleimenov
  • 21
  • 6
  • You append the `#quiz_form` element to the DOM *after* it has been loaded, so you need to use a delegated event handler. See the question I marked as duplicate for more information. – Rory McCrossan Aug 03 '16 at 12:29

1 Answers1

1

Read about Delegate Event Handler

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

$(document).on('submit','#quiz_form',function(){
  alert('sdsdsdsd');
});
Amar Singh
  • 5,464
  • 2
  • 26
  • 55