Jump to content

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


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...