使用jQuery添加输入后，验证不起作用

Question

点击添加输入并添加输入后，点击添加的按钮不会调用required_valid()中的$('.submit').submit(function () {...功能。这是为什么？

DEMO： http://jsfiddle.net/Jvw6N/

<a href="" class="add_input">Add Input</a>
<div class="get_input"></div>



$('.add_input').live('click', function(e){
    e.preventDefault();
    $('.get_input').append('<form class="submit"><input name="test" class="required"> <br /> <button>Click Me</button></form>')
})
function required_valid() {
    var result = true;
    $('.required').each(function () {
        if (!$(this).val()) {
            $(this).css("background", "#ffc4c4");
            result = false;
        }
        $(this).keyup(function () {
            $(this).css("background", "#FFFFEC");
        })
    });
    return result;
}

$('.submit').submit(function () {
    var passed = true;
    //passed = required_selectbox() && passed;
    passed = required_valid() && passed;
    if (!passed) {
        $('#loadingDiv, #overlay').hide();
        return false;
    }
});

Answer 1

您需要使用“.live（）”（或“.delegate（）”或新的“.on（）”设置“提交”处理程序，就像您的“addInput”按钮一样：

$('body').delegate('.submit', 'submit', function() {
  // your submit code here
});

您正在动态添加这些表单，因此您的处理程序实际上并未绑定到任何表单。

或者，您可以在添加表单时绑定处理程序。