I can't get my added element to activate a function

Question

I am trying to add a link to the colorbox interface as it is created. It will eventually link to the currently displayed image file but for now I just want to get the console.log to work. It adds the link correctly (#print-one) but I can't get a function to run when the link is clicked. Any help would be much appreciated!

$(document).bind('cbox_complete', function () {
    // Show close button with a delay.
    $('#cboxClose').css('opacity', 1);
    // Add Print Button
    if ($('#print-one').length ) {
        // Do Nothing
    }else {
        $('#cboxNext').after('<a href="javascript:void(0)" id="print-one">Print</a>');
    }
});

$('#print-one').click(function() {
    console.log('Works');
});

This is all wrapped inside the $(document).ready function. I just can't get the console log to work when the link is clicked. I have been beating my head against a wall trying to figure it out. Thanks for any help!

Answer 1

You need to delegate the event.

$(document).on('click', '#print-one', function(){});