How to have click() work on javascript dynamically created items?

Question

I am currently trying to figure out why the click() does not work on the buttons that have been dynamically created with js. Below is the code I have:

       jQuery(document).ready(function()
            {

                jQuery.ajax({
                url:ajaxobject.ajaxurl,
                method: 'GET',
                data: {
                    action: '2017_application'
                },
                success: function(data)
                {
                    var applications = JSON.parse(data);

                    for (var i = 0; i < applications.length; i++)
                    {
                        var content = '<div class = "app2-row app2-data">' +

                                            '<div class = "app2-col" style="font-weight:bold;">' + applications[i]['teamname'] + '</div>'+
                                            '<div class = "app2-col">' + applications[i]['firstname'] + '</div>'+
                                            '<div class = "app2-col">' + applications[i]['lastname'] + '</div>'+
                                            '<div class = "app2-col"style="font-weight:bold;">' + applications[i]['status'] + '</div>'+

                                            '<div class = "app2-col">' +
                                                '<button onclick="window.location.href=\'/info/?teamname='+ applications[i]['teamname'] + '\'">View</button><br>' +
                                                '<button class = "app2-accept" tname='+applications[i]['teamname']+'>Accept</button><br>' +
                                                '<button class = "app2-remove">Remove</button><br>' +
                                            '</div>'+
                                        '</div>';

                        jQuery("#app2-table").append(content);
                    }
                }
            });

When I use click() on the ".app2-accept" nothing happens.

    jQuery(".app2-accept").click(function()

                alert("Testing");

         });

Can anyone advise how to resolve this?

`jQuery("#app2-table").on("click", ".app2-accept", function() {} );` — epascarello, Apr 18 '17 at 14:04
I have tested using your code, but it does not work. @epascarello — ApplePie, Apr 18 '17 at 14:07
Than maybe it is the document if the `"#app2-table"` is also dynamic. `jQuery(document).on("click", ".app2-accept", function() {} );` — epascarello, Apr 18 '17 at 14:09
No, "#app2-table" is not dynamic. jQuery(document).on("click", ".app2-accept", function() {} ); still does not work — ApplePie, Apr 18 '17 at 14:13
Are you adding the handler in the success callback after `jQuery("#app2-table").append(content);`? — mhatch, Apr 18 '17 at 14:15
Than you have something else going on if event delegation is not working. Where are you binding the click event? — epascarello, Apr 18 '17 at 14:17
@mhatch not it was not. I'll try it now and see if it will work — ApplePie, Apr 18 '17 at 14:20
@mhatch still did not work in the success callback after jQuery("#app2-table").append(content); — ApplePie, Apr 18 '17 at 14:26
@mhatch You were right and I had to clear my browser cache to make it work!! Thanks everyone! — ApplePie, Apr 18 '17 at 15:00
Great! The reason is, you have to put the elements on the page before you can and the event handler to them. — mhatch, Apr 18 '17 at 16:06

How to have click() work on javascript dynamically created items?

0 Answers0