Adding a usable button to .AppendTo - Jquery

Question

Basically I've created a overlay and load this into appendTo as a 'loading screen'.

Recently, I needed to add a Stop button to the overlay which isn't a problem, however the jquery .click function isn't picking up the button click, I've tried keeping the existing button and therefore it would maybe register, but sadly hasn't.

(I've also tried using an Id for the button too.

Below is some test code to demonstrate the problem.

$(document).ready(function(){
    $("#addButton").click( function () {
        $overlay = $("<div id='overlay'><div id='contain'><h3 style='color:#FFF'>Processing, just a moment</h3> <div id='stop'><button type='button' class='btn btn-primary' id='stop1' >Stop</button></div><div class='bar' style='width: 80%; padding-top:50%'></div></div></div");
        $overlay.appendTo(document.body);
        $("#stop").click( function() {
            alert("working");
        });
    });

Edit:

Just to clarify, this is what I originally wanted, however due to 'over changes' the above example will work in my scenario, this is the original problem just for clarity.

    $(document).ready(function(){
        $("#addButton").click( function () {
            $overlay = $("<div id='overlay'><div id='contain'><h3 style='color:#FFF'>Processing, just a moment</h3> <div id='stop'><button type='button' class='btn btn-primary' id='stop1' >Stop</button></div><div class='bar' style='width: 80%; padding-top:50%'></div></div></div");
            $overlay.appendTo(document.body);

        });

$("#stop").click( function() {
                alert("working");
            });

});

Answer 1

Yes, you can do that too. See the docs for the on() method .

$(document).ready(function(){
    $("#addButton").click( function () {
        $overlay = $("<div id='overlay'><div id='contain'><h3 style='color:#FFF'>Processing, just a moment</h3> <div id='stop'><button type='button' class='btn btn-primary' id='stop1' >Stop</button></div><div class='bar' style='width: 80%; padding-top:50%'></div></div></div");
        $overlay.appendTo(document.body);
    });

    $(document).on("click", "#stop", function() {
        alert("working");
    });
});

This adds only one click listener to the document, which fires every time a click event bubbles from a #stop element. However, this is usually only needed for many elements, so you should better use a class " stop " when there's more than one such button.

Yet, I guess you will need the closure which you had in your first example to execute the right onclick-actions.

Answer 2

$(document).ready(function(){
    $("#addButton").on('click', function() {
        $overlay = $("<div id='overlay'><div id='contain'><h3 style='color:#FFF'>Processing, just a moment</h3> <div id='stop'><button type='button' class='btn btn-primary' id='stop1' >Stop</button></div><div class='bar' style='width: 80%; padding-top:50%'></div></div></div");
        $overlay.appendTo(document.body);
    });

    $(document).on('click', '#stop', function() {
        alert("working");
    });
});

Answer 3

Use .live() so that anything newly created will still get the click event.
http://jsfiddle.net/DerekL/2GCfD/

It is working now.