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

I 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!"); 
});