[jQuery] Accessing Elements after adding them with Append

[Daniel]

Hi There,

I'm having trouble accessing some Elements with jQuery after I created
them and added them to the HTML. I want to add some Checkboxes to my
Site as soon as the user clicks another Checkbox. That works just
fine. But if the user clicks on one of these added checkboxes, i want
an event to trigger, too. For starters, i just want to alert a
message. But this doesnt happen.

Here's my code:

function load(katstring) {
        var mykats = '';
        $('div#kategorien input:checkbox:checked').each(function() {
                mykats += "&mykategorien[]=" + $(this).attr('id').substr(4);
        });
        $.post('ajaxfunctions.php', '&function=updateCategories', function
(data){
                var kattext = '';
                kattext += '<ul>';
                for (index in data) {
                        kattext += '<li><input type="checkbox" name="category[]"
value="'+data[index]+'" />'+data[index]+'</li>';
                }
                kattext += '</ul>';

                $('div#categories div.select').html(kattext);
        },'json');
}

$('div#categories div.select ul li input').click( function() {
        alert("clicked");
});

So on click of the new, added checkboxes, i want to alert "clicked".
Nothing More. But that just won't happen. First, i figured the problem
lies in just adding some html Text and not properly adding the
elements to the DOM Tree. So i tried something like this:

function load(katstring) {
        var mykats = '';
        $('div#kategorien input:checkbox:checked').each(function() {
                mykats += "&mykategorien[]=" + $(this).attr('id').substr(4);
        });
        $.post('ajaxfunctions.php', '&function=updateCategories', function
(data){
                var cul = document.createElement('ul');
                for (index in data) {
                        var cli = document.createElement('li');
                        var cinput = document.createElement('input');
                        var ctext = document.createTextNode(data[index]);
                        cli.appendChild(cinput);
                        cli.appendChild(ctext);
                        cul.appendChild(cli);
                }
                document.getElementById('categories').appendChild(cul);
        },'json');
}

$('div#categories ul li input').click( function() {
        alert("clicked");
});

In this Code all the Element Attributes are missing but I think you
get what i was trying. ;) So, now I think the Elements are added
properly to DOM tree. But still, when I click on one of the added
input Elements, nothing happens.

What am I doing wrong? How can i get jQuery to recognize the Elements
I added?

Can you please help? Thanks a lot.

battlewizz