Appended <Button> not functioning JQuery

Question

I am using the .Append() method of JQuery to append buttons to an unordered list, and for some reason the appended button will not call its function when clicked. I inserted the same button using HTML, and it worked fine, but for some reason the appended button will not run. Is there a way to get them to work, or do I just have to work around it?

    $("#requestDisplay").append(<button class='requestRemovalButton'>" + "Remove Request" + "</button>);

Vs in the HTML

    <button class="requestRemovalButton">Remove Request</button>

The latter will run the function, however the former will not work, here is the function I was using to test the buttons.

    $(".requestRemovalButton").on( "click", remove);

    function remove() {
        alert( "The request is being removed, please wait." );
    }

Thanks for any advice you may have.

The way you're calling .on() will only add the event listener to .requestRemovalButton elements that exist at the point you call .on(). — ajp15243
– ajp15243, Commented Nov 20, 2013 at 14:08
I don't know if it's a copypaste error, but your code is missing some quotes. It should be .append("<button class='requestRemovalButton'>" + "Remove Request" + "</button>"); (so there's a quote before the opening <button and after the </button>) — Olly Hodgson
– Olly Hodgson, Commented Nov 20, 2013 at 14:09

palaѕн · Accepted Answer · 2013-11-20 14:06:41Z

7

Since the button is added dynamically, you need to use event delegation to register the event handler like:-

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#requestDisplay').on('click', '.requestRemovalButton', function(event) {
    event.preventDefault();
    alert( "The request is being removed, please wait." );
});

answered Nov 20, 2013 at 14:06

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

2 Comments

ByrnesW Over a year ago

I changed the format, but it still isn't working for the appended buttons. For clarification, when clicking the appended buttons, instead of giving the alert, it just refreshes the page. Edit: Nevermind, it is working, I was just clicking the wrong button. Thanks for the help!

palaѕн Over a year ago

It seems to working. Please have a look at this Fiddle Demo. I think you need to use event.preventDefault() here to prevent refreshing the page.

adeneo · Accepted Answer · 2013-11-20 14:09:06Z

2

I tend to favor creating proper elements with event handlers :

var button = $('<button />', {
    'class' : 'requestRemovalButton',
    text    : 'Remove Request',
    on      : {
           click: remove
    }
});

$("#requestDisplay").append(button);

and it the button is inside a form, you have to prevent the default action of submitting that form:

function remove(e) {
    e.preventDefault();
    alert( "The request is being removed, please wait." );
}

answered Nov 20, 2013 at 14:09

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

Appended <Button> not functioning JQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related