JQuery click event is not working on dynamically created ul Li list in mvc

[Niladri]

In my website https://www.giftstoindia24x7.com , on a button click event (in jQuery) I am populating a dynamically created html UL
Li list. It is working fine but when I am using jQuery click event on dynamically created  ul Li , it is not working.

The code is as follows:

$(document).ready(function() { $('ul.cls-ul li').click(function(e) { alert(this); }); })

Is there any better solution?

Edited May 18, 2020 by Niladri

[dsonesuk]

You have to target parent elements that already exists then created child element using .on() jQuery function.

[Makwana Prahlad]

Hello,@Niladri

Please try this code,To JQuery click event is not working on dynamically created ul Li list in mvc.

$("body").on("click", "#btnCreate", function(e) {
    $.ajax({
        type: "Get",
        url: "/ClientMaster/AddClient",
        success: function (response) {
            $("#createContainer").html(response);
            $('#ModelPopup').modal('show');
            setTimeout(function () {
                $(".btnSave").on("click", function () {                                  
                    var formdata = new FormData($('form').get(0));
                    var file = document.getElementById("Imagelogo").files[0];
                    formdata.append("Logo", file);
                    formdata.append("Imagelogo", $("#txtFile").file);
                    formdata.append("ClientName", $("#ClientName").val());
                    formdata.append("Address", $("#Address").val());
                    formdata.append("Email", $("#Email").val());
                    formdata.append("website", $("#website").val());
                    formdata.append("ContactPerson", $("#ContactPerson").val());
                    formdata.append("PhoneNumber", $("#PhoneNumber").val());
                    $.ajax({
                        url: '/ClientMaster/Create',
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (data) {
  
                            if (data != 1) {
                                $("#createContainer").html(data);
                                 $('#ModelPopup').modal('show');
                                return;
                            }
                            
                            else {
                                $('#ModelPopup').modal('hide');
                                $.notify("Client Details Succesfully Added!", { align: "right", verticalAlign: "top", type: "success", background: "#20D67B", color: "#fff", });
                               Listing();
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.error);
                        }
                    });
                });
            }, 500);
        }
    });
});

 

I hope this code will be useful.

Thank you.

[dsonesuk]

No not really? form? ajax? modal? Compare to ul li listing, total unrelated useless example.

Edited September 9, 2020 by dsonesuk