input radio on change not firing

Question

Hi i have dropdown and on selected change it will empty the div child and append input type radio on the div.

and i have this jquery code on radio click change

  $('#divNoAccess input').change( function () {
                alert('IN');
                alert($('input[name=radioNonAccess]:checked', '#divNoAccess').val());
            });

which is not even promping alert.

Here's the html code.

 <!-- Modal User Maintenance-->
        <div id="myModal4" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">

                        <h4 class="modal-title">User Maintenace</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="ddlEmp">Employee:</label>
                            <asp:DropDownList ID="ddlEmp" runat="server" class="form-control"></asp:DropDownList>

                        </div>
                        <div class="row  m-1">
                            <br />
                            <div class="col-sm-5  border border-dark">

                                <div class="form-group p-2">
                                    <label for="txtoldpass">non-Access:</label>
                                   <%-- <asp:DropDownList ID="ddlNoAccess" runat="server" class="form-control"></asp:DropDownList>--%>
                                    <div id="divNoAccess">

                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-2">

                                <div class="form-group">
                                    &nbsp&nbsp&nbsp&nbsp
                                    <button type="button" class="btn btn-primary" id="btnAddAcces"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
                                    <br />
                                    <br />
                                    &nbsp&nbsp&nbsp&nbsp
                                    <button type="button" class="btn btn-primary" id="btnRemoveAccess"><i class="fa fa-arrow-left" aria-hidden="true"></i></button>

                                </div>

                            </div>

                            <div class="col-sm-5 border border-dark">
                                <div class="form-group p-2">
                                    <label for="txtoldpass">Accessible:</label>
                                  <%--  <asp:DropDownList ID="ddlAccesible" runat="server" class="form-control"></asp:DropDownList>--%>
                                     <div id="divAccesible"></div>
                                </div>
                            </div>
                        </div>


                    </div>
                     <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
                </div>

            </div>
        </div>
        <%--end modal--%>

here's my code on populating the div element

function getWithOutAccess() {
                var response = {},
                params = { EmpNo: $('#<%=ddlEmp.ClientID%> :selected').val() };

                $.ajax({
                    async: false,
                    type: 'POST',
                    contentType: 'application/json',
                    url: '../Home.aspx/getWIthOutAccess',
                    data: JSON.stringify(params),
                    dataType: 'json',
                    success: function (data) {
                        response = data.d;
                    },
                    error: function (xhr, status, error) { console.log(xhr, status, error); }
                });
                var result = [];
                $.each(response, function (key, value) {
                   // var item = '<option value="' + value.ID + '">' + value.AppName + '</option>';
                    var item = '  <input type="radio" name="radioNonAccess"  value="' + value.ID + '"/> ' + value.AppName + ' <br />';
                    result.push(item)
                });
                <%--  $("#<%=ddlNoAccess.ClientID%> option").remove();

                $('#<%=ddlNoAccess.ClientID%>').append(result);--%>
                $('#divNoAccess').empty();
                //$('#divNoAccess input').remove();
                $('#divNoAccess').append(result);
            }

I dont see any error on console .

I also try to use other browser not even working.

What i'm doing wrong? Hope someone help me out Thank you in advance

Answer 1

Here's how I solved my problem.

Thanks to this Click on dynamically generated radio button

Final code in jQuery:

 $('#divNoAccess').on("change","input",function() {
                alert('in');
                alert($('input[name=radioNonAccess]:checked', '#divNoAccess').val());
            });