jQuery form submit not being called

Question

I have this code which adds html element to a div element by clicking the "practice button". However, when I click the submit button on the form, it does not call the "Selected Practice Option". However, my other form on the website calls the "Selected Practice Option". The code does not invoke the jQuery event of "Selected Practice Option". There are no errors in the jQuery code and the html code. Is this an error with jQuery?

 /* Pratice Button Clicked Event */
    - 35     $("#ob-practice").click(function(){
    2 36         $("#newComboDiv").css("display","none");
    2 37         $("#practiceComboDiv").css("display","inline-block");
    2 38         var data = JSON.parse(localStorage.getItem('c'));
    2 39         var text = "<form id='comboselect' action='#'> <select name='option-name'>";
    - 40         for (var i in data){
    3 41             var m = data[i];
    3 42             text += "<option> " + m.name + "</option>";
    3 43         }
    2 44         text += "</select>"
    2 45         text += "<button type='submit' value='submit'> Submit </button> </form>"
    2 46         $("#combo-menu").html(text);
    2 47     });
    | 48     /*Selected Practice Option */
    - 49     $("form").on("submit",function(e){
    2 50         e.preventDefault();
    2 51         var data = $('#comboselect').serializeArray();
    2 52         alert("test");
    2 53 
    2 54     });

Please create a complete working example (using snippet/jsfiddle/codepen) that shows how everything works together (html/css/javascript) — Dekel, Dec 24 '16 at 00:09
`Is this an error with jQuery?` well, clearly not as you quite confidently state that `There are no errors in the jQuery code` - and while some versions of the jQuery library have had bugs, these buggy versions are probably not available anywhere, so, chances are the version of the jQuery library you are using (from a reputable source I hope) does not have any errors in it — Jaromanda X, Dec 24 '16 at 00:14

score 1 · Accepted Answer · answered Dec 24 '16 at 00:19

On a click on $("#ob-practice"), the <form id='comboselect'> is dynamically created as a child within $("#combo-menu") element.

Try "delegation" from $("#combo-menu") to its children having tag name form:

$("#combo-menu").on("submit","form",function(e){
    e.preventDefault();
    var data = $('#comboselect').serializeArray();
    alert("test");
});

score 1 · Answer 2 · answered Dec 24 '16 at 00:20

your $("#ob-practice").click(function(){ creates a form

that means there is no form on the page until that click event fires

Your code adds a listener to form submit event $("form").on("submit",function(e){ - but this is done BEFORE any form exists

You need ... damn beaten by the other answer, seriously, nobody answers for almost 20 minutes, and BAM ... two answers at once :p

OK lets save this

you can also move line 47 to the end of the code snippet ... that way you add the submit handler after the form is created

- 35     $("#ob-practice").click(function(){
2 36         $("#newComboDiv").css("display","none");
2 37         $("#practiceComboDiv").css("display","inline-block");
2 38         var data = JSON.parse(localStorage.getItem('c'));
2 39         var text = "<form id='comboselect' action='#'> <select name='option-name'>";
- 40         for (var i in data){
3 41             var m = data[i];
3 42             text += "<option> " + m.name + "</option>";
3 43         }
2 44         text += "</select>"
2 45         text += "<button type='submit' value='submit'> Submit </button> </form>"
2 46         $("#combo-menu").html(text);
| 48         /*Selected Practice Option */
- 49         $("form").on("submit",function(e){
2 50             e.preventDefault();
2 51             var data = $('#comboselect').serializeArray();
2 52             alert("test");
2 53 
2 54         });
2 47     });

jQuery form submit not being called

2 Answers2