$(document).ready(function() {
    // 假设这是触发动态表单显示的事件
    $('#triggerButton').on('click', function() {
        // 发送f.select参数（假设通过AJAX）
        $.ajax({
            url: 'your-api-endpoint',
            type: 'POST',
            data: { 
                'f.select': 'your-selection-value' 
            },
            success: function(response) {
                // 动态创建表单元素
                createDynamicForm(response);
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            }
        });
    });

    // 动态创建表单元素的函数
    function createDynamicForm(data) {
        // 清空现有表单内容
        $('#dynamicFormContainer').empty();
        
        // 根据返回数据创建表单元素
        $.each(data.fields, function(index, field) {
            var formGroup = $('<div>').addClass('form-group');
            
            var label = $('<label>')
                .attr('for', field.id)
                .text(field.label);
            
            var input;
            
            // 根据字段类型创建不同的输入元素
            switch(field.type) {
                case 'text':
                    input = $('<input>')
                        .attr('type', 'text')
                        .attr('id', field.id)
                        .attr('name', field.name)
                        .attr('placeholder', field.placeholder || '');
                    break;
                case 'select':
                    input = $('<select>')
                        .attr('id', field.id)
                        .attr('name', field.name);
                    
                    $.each(field.options, function(i, option) {
                        $('<option>')
                            .val(option.value)
                            .text(option.text)
                            .appendTo(input);
                    });
                    break;
                case 'checkbox':
                    input = $('<input>')
                        .attr('type', 'checkbox')
                        .attr('id', field.id)
                        .attr('name', field.name)
                        .attr('value', field.value || '1');
                    break;
                // 可以添加更多类型的处理
            }
            
            // 将标签和输入元素添加到表单组
            formGroup.append(label).append(input);
            
            // 将表单组添加到容器
            $('#dynamicFormContainer').append(formGroup);
        });
        
        // 添加提交按钮
        $('#dynamicFormContainer').append(
            $('<button>')
                .attr('type', 'submit')
                .addClass('btn btn-primary')
                .text('Submit')
        );
    }
});

$(document).on('submit', '#dynamicFormContainer', function(e) {
    e.preventDefault();
    
    // 收集表单数据
    var formData = {};
    $(this).find('input, select, textarea').each(function() {
        var $el = $(this);
        if ($el.attr('type') === 'checkbox') {
            formData[$el.attr('name')] = $el.is(':checked');
        } else {
            formData[$el.attr('name')] = $el.val();
        }
    });
    
    // 发送表单数据
    $.ajax({
        url: 'your-submit-endpoint',
        type: 'POST',
        data: formData,
        success: function(response) {
            alert('Form submitted successfully!');
        },
        error: function(xhr, status, error) {
            console.error('Submission error:', error);
        }
    });
});

// 错误方式（只对现有元素有效）
$('.dynamic-element').on('click', function() { ... });

// 正确方式（对动态添加的元素也有效）
$(document).on('click', '.dynamic-element', function() { ... });

function createDynamicForm(data) {
    // 创建表单元素...
    
    // 重新初始化验证
    $('#dynamicForm').validate({
        rules: {
            // 验证规则
        }
    });
}

function createDynamicForm(data) {
    var html = '';
    
    $.each(data.fields, function(index, field) {
        html += '<div class="form-group">';
        html += '<label for="' + field.id + '">' + field.label + '</label>';
        
        // 根据类型构建输入元素
        if (field.type === 'text') {
            html += '<input type="text" id="' + field.id + '" name="' + field.name + '">';
        }
        // 其他类型处理...
        
        html += '</div>';
    });
    
    $('#dynamicFormContainer').html(html);
}