Html radio button type tags appended into div using jquery no firing click event

Question

0.00/5 (No votes)

See more:

I am using jquery

3.3.1.min.js

. In my project, I am creating HTML radio button at runtime from Javascript section and appending it in div tag. HTML tag I am creating has click event attached with it. The problem is this click event does not get fired. Here is my code:

Javascript Section:

$(document).ready(function () {
debugger;
$('.UserType').click(function () {
debugger;
alert("a");
});
PPP();
});

function PPP() {
var html = '<label class="btn btn-primary"><input class="UserType" id="UserType" name="UserType" type="radio" value="1">Individual</label> <label class="btn btn-primary"><input class="UserType" id="UserType" name="UserType" type="radio" value="2">Admin</label> <label class="btn btn-primary"><input class="UserType" id="UserType" name="UserType" type="radio" value="3">Agent</label> <label class="btn btn-primary"><input class="UserType" id="UserType" name="UserType" type="radio" value="4">SubAgent</label>'
$("#divUserType").append(html);
}

HTML Section:

<body>
<form id="form1" runat="server">
<div id="divUserType">

</div>
</form>
</body>

While inspecting, I found out that element is created. But when I did view page source, appended HTML tags does not exist.

What I have tried:

Tried creating obtrusive code for click but this too did not work.

Posted 3-Mar-19 5:48am

Codes DeCodes

Updated 5-Mar-19 6:45am

Add a Solution

2 solutions

Solution 2

Another option would be to use delegated events:

JavaScript

$(document).on("click", ".UserType", function(){
    debugger;
    alert("a");
});

$(document).ready(function () {
    debugger;
    PPP();
});

Direct and delegated event handlers | .on() | jQuery API Documentation[^]:
Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

Posted 5-Mar-19 6:46am

Richard Deeming

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Accepted Answer · 2019-03-03T06:18:00

When you attach the click event to .UserType the elements don't exist yet so there is nothing to attach to. Re-arrange the code so that you attach the click event after the elements have been created.

$(document).ready(function () {
    PPP();

    $('.UserType').click(function () {
        alert("a");
    });

});