jQuery: fire click event on dynamically added HTML

Question

I add dynamically a form into a <div> using jQuery with some data retrieved via Ajax (it's made to update some records). Problem is that i'm not able to fire a click event on this form as i assume it is created after the document comes ready. I need to fire this event to call Ajax again and save the new data in the db.

Basically, this creates the form into the <div id="#result"> :

jQuery(document).ready(function ($) {
    $.ajax({
        [...]
        success: function(data) {
            $('#result').html(
                '<form name="form_name_here">' +
                    '<input type="text" value="' + data[0].it + '">' +
                    [...]
                    '<input type="button" id="update_record" value="Save"> ' +
                '</form>'
            );
        }
    });
});

But then this won't work:

jQuery(document).ready(function ($) {
    $.ajax({
        [...]
    });
    $('#update_record').click(function () {
        console.log('test');
    });
});

I tried also $('#update_record').on('click', function() { with no success.

Answer 1

Try:

$(document).on("click", "#update_record", function(){
});