javascript - jQuery 表单提交未被调用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我有这段代码，通过单击“练习按钮”将 html 元素添加到 div 元素。但是，当我单击表单上的提交按钮时，它不会调用“选定的练习选项”。然而，我在网站上的另一个表格称为“选定的练习选项”。该代码没有调用“选定练习选项”的 jQuery 事件。 jQuery 代码和 html 代码没有错误。这是 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     });

Answer 1

在click上上$("#ob-practice") ，<form id='comboselect'>在 $("#combo-menu") 中动态创建为子项元素。

尝试来自 $("#combo-menu") 的“委托(delegate)”其子代的标签名称为 form :

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