0

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

});
Ash
  • 3,494
  • 12
  • 35
  • 42
  • possible duplicate of [jQuery triggered newly added html code](http://stackoverflow.com/questions/10677194/jquery-triggered-newly-added-html-code) – samjudson May 20 '12 at 21:09
  • 1
    worksforme: http://jsfiddle.net/3HMcT/ – Bergi May 20 '12 at 21:14
  • @samjudson: No, this is different. `#stop` will be in the DOM before `$('#stop').click(...)` is called to bind a handler to it. – mu is too short May 20 '12 at 21:14
  • 1
    Sorry, yes. Try using $("#stop1") instead, as you are adding the click to the div, not the button. – samjudson May 20 '12 at 21:16
  • Sorry people I miss wrote the example above, but upon reflection having the update function within my addButton may be a viable solution. – Ash May 20 '12 at 21:38
  • Yeah this will work, thanks all :) – Ash May 20 '12 at 21:42

3 Answers3

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.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
1
$(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");
    });
});
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • @Bergi Yeah, I noticed! And no, I did not copy your code, just wrote almost the same thing? – adeneo May 20 '12 at 22:15
  • I know you could not have copied it, but I really thought it would be exactly the same :-) Just starting to realize the little differences... +1 for the double use of .on() – Bergi May 20 '12 at 23:10
0

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.

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247