jquery动态生成form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Form with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="createFormBtn">Create Form</button>
    <div id="formContainer"></div>

    <script>
        $(document).ready(function() {
            $('#createFormBtn').click(function() {
                // 创建表单元素
                var form = $('<form></form>');
                var input = $('<input type="text" name="username" placeholder="Username">');
                var submitButton = $('<button type="submit">Submit</button>');

                // 将元素添加到表单中
                form.append(input);
                form.append(submitButton);

                // 将表单添加到容器中
                $('#formContainer').append(form);

                // 绑定表单提交事件
                form.submit(function(event) {
                    event.preventDefault();
                    alert('Form submitted!');
                });
            });
        });
    </script>
</body>
</html>

form.submit(function(event) {
    event.preventDefault();
    alert('Form submitted!');
});

$('#formContainer').append(form);
// 重新应用样式或初始化组件