Click event doesn't work on when dynamically adding classes to controls

Question

I have the following components:

<asp:button runat="server" ID="testjavascript" Enabled="false" OnClientClick="return false;"/>
<asp:button runat="server" ID="testcodebehind" OnClick="testfunction" />

I have this javascript class function:

$('.close').on('click', function() {
    alert("it works!");
    return false;
});

I have the buttons inside an update panel and it is working asynchronously. When clicked, testcodebehind enables and adds the class "close" to the testjavascript button:

testjavascript.Enabled = true;
testjavascript.Attributes.Add("class", "close");

Now here is my problem, when I click on testcodebehind, it works and testjavascript becomes enabled. testjavasctipt also gets the class "close" (F12 - inspect), but clicking on it does not trigger the javascript function! I know that the function works because if I change the testjavascript button and manually add the class close to it, then it works.

I checked online (for hours) and found several links, one of them was this: Click event doesn't work on dynamically generated elements

Many of the other links were basically the same. But I already have .on!

Any help would be greatly appreciated. Thank you!

You have `on()`, but have you actually read any of the answers, or the documentation, on how to use `on()` with dynamically generated elements, as that's not at all what you're doing? It's something similar to `$(document).on('click', '.close', function() {...` — adeneo, Dec 30 '15 at 01:11
Possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — mariocatch, Dec 30 '15 at 01:53

score 1 · Answer 1 · answered Dec 30 '15 at 01:15

Try to delegate the events for dynamically added elements:

$('body').on('click', '.close', function() {
    alert("it works!");
    return false;
});

The reason is, when the document is loaded, you bind the events to the elements those exist. But when you add elements dynamically, through AJAX or JavaScript, they are not present when the event was bound at first.

So this delegation will listen for any DOM Change happening within the static parent and once something happens, it immediately fires the event binding script again to all those.

I saw that you already saw the other links, but didn't know how to implement it, so I have added the code for you to just copy and paste.

Sorry Praveen, I forgot to mention that, I did that as well and got the same result, I am completely baffled as to why its not working. — Albraa, Dec 30 '15 at 02:36

Hemal · Answer 2 · 2015-12-30T05:20:49.103

You can use something like this. Also check if class .close is added to the button.

$(document).on('click', '.close', function() {
    console.log("it works");
    return false;
});

You can also do it this way for controls in UpdatePanel because they are not loaded each time.

Sys.Application.add_load(function(){
    $(".close").click(function(){
        console.log("Now this should work");
        return false;
    });
});

Click event doesn't work on when dynamically adding classes to controls

2 Answers2