jQuery html javascript not firing after setting html

Question

I have a issue where I am setting an HTML to the DOM through jQuery html() method. When my content is loaded, there is a link in it and I am capturing that link vie jQuery on Click method but that doesn't see to be working. Please refer to the screenshot below. First screenshot is where page is loaded for the first time. jQuery on click method works just fine.

Here is my onclick method

$(document).ready(function () {
    $("a.editAddressLink").on('click', function (e) {
                e.preventDefault();
                alert('editAddressLink clicked');
                var url = this.href;
                var dataObject = {};
                CustomAjaxRequest("Get", url, dataObject, "text", "HandleEditAddress", null, true);
                return false;
            });
        });
});

function HandleEditAddress(data) {
        $("#addressDisplay").fadeOut(1000, function() {
            $(this).html('<div class = "panel-body">'+data+'</div>').fadeIn(1000);
            if ($('#AddressType').length && $('#AddressType').val() != "") {
                $('#AddressTypeslist').val($('#AddressType').val());
            } else {
                $('#AddressTypeslist').val('');
            }
            $('#AddressTypeslist').trigger('change');
            $('#addressDisplay').css('display', '');
        });

        //$("#addressDisplay").html(data);

    }

and now when I click on the edit link, the function to handle the click doesn't fire. I made sure looking at the source that function is available to the DOM all the time since I don't do any page refreshes.

Any help will be appreciated. Thanks

The Alpha · Accepted Answer · 2016-03-29 18:43:52Z

2

You should use a delegated event handler like this:

$(document).on('click', 'a.editAddressLink', function (e) {
    // ...
});

answered Mar 29, 2016 at 18:43

The Alpha

147k30 gold badges294 silver badges313 bronze badges

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

2 Comments

Andy Johnson Over a year ago

The Alpha, How it is different than $("a.editAddressLink").on('click', function (e) {});

The Alpha Over a year ago

$("a.editAddressLink").on('click', and $(document).on('click', 'a.editAddressLink' both are different, check the link for more information.

Collectives™ on Stack Overflow

jQuery html javascript not firing after setting html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related