Question

I have a list of JSON generated data, fetched from a MySQL database. What I’m trying to do now is, when any of the item on the list is clicked, it would be added into a hidden input for my form, but the problem is, that if I do this:

$(".buttonZvrst").click(function(){
alert("this is a test");
});

nothing will happen. If I pick any other element that is not in the JSON generated list, it will work. Does it not work, because it’s generated at a later time? I need assistance! Here is my getZvrsti function, where JSON is.

function getZvrsti(id) {
            // Save the request to our requests object
            request[id] = $.getJSON('test.php?parent='+id, function(data) {
                var html = "";
                $.each(data, function(id, name) {
                    if(name['id'] in izbrani){
                        if(izbrani[name['id']] == true){
                            html += '<li id="drugaZvrst" class="izbran"><a class="buttonZvrst" href="#" id="'+name['id']+'">'+name['name']+'</a></li>';
                        }
                        else{
                            html += '<li id="drugaZvrst"><a class="buttonZvrst" href="#" id="'+name['id']+'">'+name['name']+'</a></li>';
                        }
                    }
                    else
                    {
                        izbrani[name['id']] = false
                        html += '<li id="drugaZvrst"><a class="buttonZvrst" href="#" id="'+name['id']+'">'+name['name']+'</a></li>';
                    }


                });
                // Append the list items and then fade in
                listUl.append(html);
                druga.show(400);
                // We no longer have a request going, so let's delete it
                request = false;
            });
        }

Answer 1

You’re using .click which binds it once for the available elements during the execution of the script. For dynamic elements you need .live look up .live() on the jQuery Docs:

.live : Attach a handler to the event for all elements which match the current selector, now and in the future.