javascript - 如何使用表单的变量引用来访问 jquery 中的表单字段？

Question

学习jquery，在chrome控制台创建表单:

var $form1 = $("<form/>", { id: 'form1' });
$div1.append($form1);

然后尝试在表单提交期间访问字段:这有效:

$('#form1').submit(function(e) {
    e.preventDefault();
    $('#form1 input, #form1 select').each(function(index){
        var input = $(this);
        console.log('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    });
});

输出:类型:text名称:name1值:hello world类型:submitName:submit1Value:提交

但这并不:

$($form1).submit(function(e) {
    e.preventDefault();
    $($form1).each(function(index){
        var input = $(this);
        console.log('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    });
});

输出:类型:未定义名称:未定义值:

如何使用变量 $form1 而不是实际元素 #form1 访问表单字段？

感谢您的回答。

Answer 1

您可以使用children使用选择器来过滤所需的。

var $div1 = $('body');
var $form1 = $("<form>", { id: 'form1' });
$div1.append($form1);

$form1.append('<input name="test" type="text"/> <input value="go" name="whattodo" type="submit" />');


$($form1).submit(function(e) {
    e.preventDefault();
    $form1.children('input').each(function(index){
        var input = $(this);
        console.log('Type: ' + input.attr('type') + ' Name: ' + input.attr('name') + ' Value: ' + input.val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>