Zdarzenia nie strzelające do dynamicznie tworzonych elementów (JQuery)

Tworzę stronę, która wymaga od użytkownika, aby mógł tworzyć elementy wejściowe, i muszę mieć możliwość pobierania danych z tych elementów w oparciu o powiązane z nimi zdarzenia. Dołączam je do treści dokumentu i dopisują poprawnie, ale wtedy ich wydarzenia nie są odpalane.

JSFiddle: http://jsfiddle.net/g7Sdm/2/

Podstawowy HTML:

<input type="radio" class="userInput" value="I'm a radio button that already existed when the page loaded." />Pre-Existing Radio Button
<input type="text" class="userInput userTextInput" value="Text" />
<button type="button" id="addRadio">Add Radio Button</button>
<button type="button" id="addText">Add Text Input</button>

Javascript:

$(document).ready(function() {
    $("#addRadio").click(function() {
           $("html").append("<input type=\"radio\" class=\"userInput\" value=\"I'm a dynamically added radio button!\" />New Radio Button<br />");
    });
    $("#addText").click(function() {
           $("html").append("<input type=\"text\" class=\"userInput userTextInput\" value=\"Text\" /><br />");

    });
    $(".userInput").click(function() {
        alert($(this).val()); 
    });
    $(".userTextInput").keyup(function() {
        alert($(this).val()); 
    });
});

Dzięki za pomoc! Jest bardzo późno i potrzebuję snu, ale rano sprawdzę.

questionAnswers(2)

yourAnswerToTheQuestion