Question

I am working on dynamically adding a link with a click event handler after a series of span tags on a page. The link is being added to the page, but when clicked the event handler is not firing. There are no errors recorded in the web console. I am sure that I am missing something obvious in the below code:

function changeClicked (e) {
    e.preventDefault();
    console.log('should work');
}

function initChangeOwner() {
    var changeLink = $('<a />', {
        href: '#',
        text: 'change',
        'class': 'changeLink',
        click: changeClicked
    });

    var licenseFor = $('[id*="LicenseFor"]').after(changeLink);
}

$(document).ready(function () {
    initChangeOwner();
    // other inits
});

Why is my click event handler not firing? For those who like to fiddle I have setup an example on jsFiddle.

_{* This is an older application which utilizes jQuery 1.4.1. Unfortunately, now is not the time to update the reference to a new version.}

Answer 1

There is no need to get fancy on dynamic bindings in your particular case.
Seeing you are in control when adding the elements and you want to bind the event at that time you can just bind you click event separately after you attached the elements.

function initChangeOwner() {
    var changeLink = $('<a />', {
        href: '#',
        text: 'change',
        'class': 'changeLink'
    });

    var licenseFor = $('[id*="LicenseFor"]').after(changeLink);

    // Now the elements exist and you can bind the click event using the 'changeLink' class as a selector.
    $(".changeLink").click(function(event){changeClicked(event);});

}

DEMO – Bind after elements are created