Events not firing on dynamically created elements (JQuery)

Question

I'm creating a page that requires a user to be able to create input elements, and I need to be able to retrieve the data from those elements based on events tied to them. I am appending them to the body of the document, and they are appending properly, but then their events aren't firing.

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

Base 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()); 
    });
});

Thanks for any help!! It is very late and I need sleep, but I'll check back in the morning.

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Bergi, Apr 21 '16 at 12:29

score 3 · Accepted Answer · answered Jun 15 '13 at 06:30

You have to use the on() method, as the elements have to be binded dinamically

$(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 />");

    });
    $(document).on("click","userInput",function() {
        alert($(this).val()); 
    });
    $(document).on("click",".userTextInput",function() {    
        alert($(this).val()); 
    });
});

Here is the demo

no problem, feel free to check the demo I included so you can test this solution — isJustMe, Jun 15 '13 at 06:37

score 2 · Answer 2 · answered Jun 15 '13 at 06:27

2

Change to:

$(document).on("click", ".userInput", function() {
    alert($(this).val()); 
});

$(document).on("click", ".userTextInput", function() {
    alert($(this).val()); 
});

answered Jun 15 '13 at 06:27

tymeJV

103,943
14
161
157

Events not firing on dynamically created elements (JQuery)

2 Answers2

Linked

Related