Jump to content
Niladri

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Edited by dsonesuk

Share this post


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...