click() function from click() function does not work

Question

The problem is that when I click delaccbut button, the click function works, and shows the message, but when I click the confdel or redel button from the click function, it doesn't... Why?

HTML:

<span id='delaccspan'>
<button class='defbutt' id='delaccbut'>Delete my account</button>
</span>

jQuery:

$(document).ready(function(){
    $("#delaccbut").click(function(){
        $("#delaccspan").html("All your posts, pictures, followers and everything you did on this page will be deleted. Do you want to continue? <button class='smallbut' id='confdel'>Yes</button> <button class='smallbut' id='redel'>No</button>");
    });
    $("#confdel").click(function(){
        $("#delaccspan").html("Okay");
    });
    $("#redel").click(function(){
        $("#delaccspan").html("Good decision!");
    });
});

What is wrong here? Thanks!

There aren't elements with IDs of confdel or redel and you are attempting to target delaccspan with a dollar sign instead of a hash symbol. — George
– George, Commented Jul 3, 2015 at 15:56
all of those click functions can be put into 1 document ready function as well. — floor
– floor, Commented Jul 3, 2015 at 15:58
Well so I fixed it and still... nothing shows up after clicking that button.. what do you mean by There aren't elements with IDs of confdel or redel ? — Steven Dropper
– Steven Dropper, Commented Jul 3, 2015 at 15:59

Moob · Accepted Answer · 2015-07-03 16:04:25Z

3

Your yes and no buttons don't exist at the time the script is initialised. You need to delegate the event to a parent so that it can be applied to specific children wether they exist now or in the future.

See: http://learn.jquery.com/events/event-delegation/

$(function(){
    $("#delaccbut").click(function(){
        $("#delaccspan").html("All your posts, pictures, followers and everything you did on this page will be deleted. Do you want to continue? <button class='smallbut' id='confdel'>Yes</button> <button class='smallbut' id='redel'>No</button>");
    });

    $("body").on("click", "#confdel", function(){
        $("#delaccspan").html("Okay");
    });

    $("body").on("click", "#redel", function(){
        $("#delaccspan").html("Good decision!");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='delaccspan'>
<button class='defbutt' id='delaccbut'>Delete my account</button>
</span>

edited Jul 3, 2015 at 16:04

answered Jul 3, 2015 at 15:59

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steven Dropper Over a year ago

Is there a solution with $("#confdel").click() function? Or is your answer the only solution and my "way" of executing it is incorrect ?

Moob Over a year ago

There are always 'other' solutions but they'll all be forms of event delegation. You can't listen for a click on an element that doesn't exist. I suppose you could have the elements in existence all the time but toggle which one is shown.

Mike Perrenoud Over a year ago

@StevenDropper, the on method in jQuery watches for DOM changes. This is the only way to get those to hook up later.

Steven Dropper Over a year ago

Yeah, I got it now, so this basically means that jQuery searches the html as it is in real state, not as user/jQuery changes it?

Moob Over a year ago

jQuery/javascript sees the the live DOM (including any changes to it) but you asked it to add an event listener to an element that wasn't in the DOM at all (yet).

Collectives™ on Stack Overflow

click() function from click() function does not work

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related