从动态创建的表单中获取数据

>我已经设法使用引导类等动态/编程地创建一个模态表单。但是当我尝试从输入框中访问数据时，我没有得到console.log().就好像表单不存在于 dom 上并且无法收集任何输入一样。

我之前在硬编码的模态表单上使用相同的"getFormData"函数尝试过这个。调用console.log()，检查器在 dom 对象的控制台输出上显示"元素突出显示选项"，这与新的动态表单不同。

• 如何使用动态创建的表单模态获取此数据？

简讯

//create form modal   
function getMessageTemplate(message, instance)
{
    var styles = 
    {
        success:{alert: 'alert-success', icon: 'glyphicon glyphicon-ok-sign'},
        error:{alert: 'alert-danger', icon: 'glyphicon glyphicon-remove-sign'},
        warning:{alert: 'alert-warning', icon: 'glyphicon glyphicon-question-sign'},
        default:{alert: 'bg-primary', icon: 'glyphicon glyphicon-cog'}
    };
    var header =
    '<div class="modal-header no-scroll '+ styles[message.style]['alert'] +'">'+
        '<i class="'+ styles[message.style]['icon'] +'"></i>'+
        '<h4 class="message"><strong>'+ message.title +'</strong></h4>'+
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'+
    '</div>';
    var body = '';
    var footer = '';
    if(message.form !== undefined)
    {   
        body = $('<div class="modal-body"></div>');
        form = body.append('<form id="form-' +message.form.name+ '" class="form"></form>');
        $(message.form.input).each(function(index,value)
        {  
            input = form.append(
                '<div class="row">'+
                    '<div class="col-xs-2">'+
                        '<label>' +value.label+ ':</label>'+
                    '</div>'+
                    '<div class="col-xs-9">'+
                       '<div class="input-group add-on col-xs-2">'+
                            '<div class="input-group-btn">'+
                                '<a class="btn btn-default" data-toggle="popover-input" data-html="true" title="Item Name" data-content=" Name of the item, multiple names allowed for different container sizes. <br/>Only: characters (A-Z)."><span class="glyphicon glyphicon-question-sign"></span></a>'+
                            '</div>'+
                           '<input name="' +value.name+ '" class="form-control red-tooltip" placeholder="...." title="" type="text" >'+
                        '</div>'+
                    '</div>'+
                   '<div class="col-xs-1">'+
                        '<a class="valid-icon small fail glyphicon glyphicon-remove"></a>'+
                   '</div>'+
                '</div>');
        });
    }
    if(message.submit !== undefined)
    {
        footer = 
        '<div class="modal-footer msg-footer">'+
            '<input class="form-input" type="hidden">'+
            '<div class="row text-center">'+
                '<button id= "close"  class="btn btn-default btn-msg" type="button" data-dismiss="modal"> Back</button>'+
                '<button id= "'+ message.submit.id +'" name= "'+ message.submit.name +'" class="btn btn-default btn-msg '+ message.submit.class +'" type="button" data-dismiss="modal"> Submit</button>'+
            '</div>'+
        '</div>';
    }
    var container = $('<div id="alert'+ instance +'" class="msg modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;"></div>')
    .append(header)
    .append(body)
    .append(footer); 
    return container[0].outerHTML;
}

//gather form infomation
function getFormData(form)
{
     console.log(form); //dom object
     var formName = form.attr('id');
     $('body #'+formName+' input').each(function(inputKey, inputObj)
     {   
          var inputName = $(inputObj).attr('name');
          var inputValue = $(inputObj).val();
          //none of this is displayed
          console.log('------[input-start]-----');
          console.log(inputName); 
          console.log(inputValue);
     });
}

//submit button event for modal form 
$('body').on('click', '.btn-form', function(e) 
{
     var sourceForm = $(this).closest('.modal').find('form');
     var formData = getFormData(sourceForm);
     //do stuff with formData etc
} 

这些功能的功能更多，因此我进行了编辑以显示核心表单功能。

摆弄我