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

我opened a bug on jQuery似乎每个人都必须像this example on 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!");
});

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

1 个答案: