CODEWITHSUNDEEP
javascriptjqueryweb
Ash
Ash

Reputation: 3532

Adding a usable button to .AppendTo - Jquery

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

});

Upvotes: 0

Views: 455

Answers (3)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94339

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

enter image description here

　　　　　　　　　　　　　　　　　　 It is working now.

Upvotes: 0

adeneo
adeneo

Reputation: 318302

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

Upvotes: 1

Bergi
Bergi

Reputation: 664969

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.

Upvotes: 1

Related Questions