Jump to content

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


Niladri
 Share

Recommended Posts

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 by Niladri
Link to comment
Share on other sites

  • 3 months later...

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...