How to bind click event to button from ajax result

Question

So I have Button_1 that when click, it will request a new button_2 using ajax. Both button has click event on my jquery(document).ready but when the button 2 added to the page, it doens't have jquery event on it. Is that possible?

Here is my code on page load:

jQuery(document).ready(function($){

$('#button_1').click(function(e){
    e.preventDefault();
    var id = $(this).data('id');

    $.ajax({
        type: 'POST',
        url: 'get_button_2.php',
        data: 'id='+id,
        dataType: 'html'
    })
    .done(function(response){
        $('#button-container').html('');
        $('#button_1').remove(); // remove button 1
        $('#button-container').html(response).show('500');
    })
    .fail(function(){
        $('#button-container').html('Something went wrong');
    });

});


$('#button_2').click(function(e){
    e.preventDefault();
    alert ('Thank You!');
});

});

hey @RobS. I edited my question and added my current code. Thanks! — RaffyM, Apr 20 '18 at 14:50

score 4 · Accepted Answer · answered Apr 20 '18 at 14:52

4

You have to create the event on DOM.

$(document).on('click', '#button_2', function(e){
    e.preventDefault();
    alert ('Thank You!');
});

REF: http://api.jquery.com/on/

answered Apr 20 '18 at 14:52

Roy Bogado

4,108
1
12
29

This works! Thank you! – RaffyM Apr 20 '18 at 15:00
Nice! good luck coding! – Roy Bogado Apr 20 '18 at 15:00

How to bind click event to button from ajax result

1 Answers1

Linked