ajax - jQuery 不会在注入后的表单上触发事件

Question

我正在使用 jQuery 2.0.0，我有一个带有 2 个链接的基本页面。如果用户单击每个链接，则通过 Ajax 加载表单并注入到容器中。早些时候可以将事件绑定到未来的元素，live()但现在我认为应该可以on()，但它不会触发submit事件，只要我在注入表单后注入脚本就可以了。作为浏览器，我使用的是 Firefox 20。

页：

<!-- Normal HTML5 head with jQuery loader //-->
<a href="./login">Login</a>
<!-- Normal HTML5 end //-->

登录（通过 Ajax）：

<form id="login" action="./login">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />

    <label for="password">Password:</label>
    <input type="password" name="password" id="password" />

    <input type="submit" value="Login" />
</form>

最后是我的脚本：

$(document).ready(function() {

    $('a').on('click', function(e) {
        $('body').load($(this).attr('href'));
        e.preventDefault();
    });


    $('#login').on('submit', function(e) {
        e.preventDefault();

        // Some validation and as test if event is fired
        alert("Fired!");
    });

});

Answer 1

我在 jQuery 上打开了一个错误，似乎每个人都必须像在jsFiddle 上的这个示例中那样使用事件委托：

$('#inject').on('click', function(e) {
    $('body').html('<form id="login" action="./login"> \
                       <label for="username">Username:</label> \
                       <input type="text" name="username" id="username" /> \
                       <label for="password">Password:</label> \
                       <input type="password" name="password" id="password" /> \
                       <input type="submit" value="Login" /> \
                   </form>');
});

$('body').on('submit', '#login', function(e) {
    e.preventDefault();

    // Some validation and as test if event is fired
    alert("Fired!");
});