Button inside a jQuery showable div

Question

Evening everyone,

I have a quick question that I am hoping is something that is possible.

I have a page that I use for deleting records from a database.

I have a delete button which will do what I need it to. I am wanting to have a div slide down when the delete button is clicked as a confirmation of what is going to be deleted.

I can do the slide down just fine and adding the text.

This is what I have so far:

$('#delete').on('click', function()
{
    $('#info').slideDown();
    $('#info').html('Really delete <?php echo $aid; ?>?');
    $('<br/><br/><input type="button" value="Sure" id="sure">').appendTo('#info');
});

$('#sure').on('click', function(e)
{
    e.stopPropagation();
    alert('Goodbye <?php echo $aid; ?>?');
});

I am wanting the button with the id of sure to trigger an event when clicked. I am able to show the button, and click it but it isn't triggering anything when clicked on.

I added the stop propagation from looking at this question

I have done a quick Google and nothing seems to fit what I need it to do. Is this something really simple that I am missing? Or is it something that can't be done?

Also, this is the basic gist of my form:

<form name="..." action="..." method="...">

    // form content

    <input name="delete" type="button" id="delete" value="Delete" tabindex="23"/>

    <div id="info"></div>

</form>

Here is a fiddle for it

TIA

You need event delegation http://learn.jquery.com/events/event-delegation/ since your `#sure` button isn't currently in the DOM at the point of adding the click listener to it so you will need to change it to something like `$(document).on('click', '#sure', function(e) ...` — Rob Schmuecker, Jul 18 '14 at 23:20

score 1 · Accepted Answer · answered Jul 18 '14 at 23:21

1

You need to delegate the event.

$(document).on('click', '#sure', function(e)
{
    e.stopPropagation();
    alert('Goodbye <?php echo $aid; ?>?');
});

See an updated fiddle: http://jsfiddle.net/A8S5W/1/

answered Jul 18 '14 at 23:21

HaukurHaf

13,522
5
44
59

score 1 · Answer 2 · answered Jul 18 '14 at 23:35

The problem you're having, I believe, is that the confirmation button doesn't exist when the click listener is being set up. There are two ways I can think of off the top of my head to get around this:

move the confirmation listener function inside of your delete listener function.

$('#delete').on('click', function(){
    $('#info').slideDown();
    $('#info').html('Really delete <?php echo $aid; ?>?');
    $('#info').append("<br/><br/><button value='Sure' id='sure'>");
    $('#sure').on('click', function(e){
        alert('Goodbye <?php echo $aid; ?>?');
    });
});

change the confirmation listener to listen to the document

$('#delete').on('click', function(){
    $('#info').slideDown();
    $('#info').html('Really delete <?php echo $aid; ?>?');
    $('<br/><br/><button value="Sure" id="sure">').appendTo('#info');
});

$(document).on('click', '#sure', function(e){
    alert('Goodbye <?php echo $aid; ?>?');
});

The second method is kinda gross because listeners on the whole document are pretty inefficient. The first one is kinda gross because nesting tons of jQuery is just asking for something to break. But, they should both work.

Also, you shouldn't need to stop event propagation because there aren't any events on that button anyway.

Button inside a jQuery showable div

2 Answers2