Validation doesn't work after adding an input with jQuery
<p>After clicking on <strong>Add Input</strong> and adding an input, clicking on the added button doesn't call the <code>required_valid()</code> function in <code>$('.submit').submit(function () {...</code>. Why is this?</p>

<p><strong>DEMO:</strong> <a href="http://jsfiddle.net/Jvw6N/" rel="nofollow">http://jsfiddle.net/Jvw6N/</a></p>

<pre><code>&lt;a href="" class="add_input"&gt;Add Input&lt;/a&gt;
&lt;div class="get_input"&gt;&lt;/div&gt;



$('.add_input').live('click', function(e){
    e.preventDefault();
    $('.get_input').append('&lt;form class="submit"&gt;&lt;input name="test" class="required"&gt; &lt;br /&gt; &lt;button&gt;Click Me&lt;/button&gt;&lt;/form&gt;')
})
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() &amp;&amp; passed;
    passed = required_valid() &amp;&amp; passed;
    if (!passed) {
        $('#loadingDiv, #overlay').hide();
        return false;
    }
});
</code></pre>
