JQuery - button won't append the div

Question

Like the title says, when you click the button btnSubmit in this code here:

http://jsfiddle.net/piratescott/stbmfbw8/1/

The function to append the code in the stream div wont run

Button code that wont work:

$(document).ready(function () {
    $("#btnSubmit").click(function () {
        $("#stream").append("chips");
    });
});

Button being generated by JQuery beforehand (take note of input id="btnSubit" at the end, button is actually there just not working, works find if not generated by jquery)

            $username = json.name;

            $("#stream-buttons span").append("<li id=\"streamers\"><img height=\"100px\" width=\"100px\" src=\"" + json.logo + "\"/><a href=\"" + json.url + "\"><p>" + json.display_name + "</p></a><p>Online</p><input id = \"btnSubmit\" type=\"submit\" value=\"" + $username + "\"/></li>");

Event delegation for dynamically created by JavaScript. http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation `$(document).on('click', '#btnSubmit', function() { //blah });` — bencripps, Sep 10 '14 at 00:30
Tried this a few different ways and still didn't work, going to attempt some of the other methods in those links though thanks — ThatGuy, Sep 10 '14 at 00:46

score 0 · Answer 1 · answered Sep 10 '14 at 01:06

You are binding an event to an object that is not yet part of the DOM.

Also you are assigning same ID to multiple elements, use CLASS instead.

Try this:

for (index = 0; index < names.length; ++index) {
    $.getJSON("https://api.twitch.tv/kraken/channels/" + names[index] + "/?callback=?", 
         function (json) {
             if (condition) {
                 // create element
             } else {
                 // create element
             }

             // bind event to created element
             $(".btnSubmit").unbind('click').bind('click', function () {
                 $("#stream").append("chips");
             });
         }
    );
}

JQuery - button won't append the div

1 Answers1