hi daniel,
You have to bind click function after the element was append to DOM. But
there is a problem Jquery support multiple binding. So you have to first
unbind the click function, then append an element to the DOM and then bind
click function. I think this code will help you -:
$("div#categories ul li input").unbind('click',alertfunction);
//append element
$("div#categories ul li input").bind('click',alertfunction);
function alertfunction()
{
alert("clicked");
}
Thanks
Rupak
On Wed, Sep 2, 2009 at 2:21 PM, Daniel <battlew...@googlemail.com> wrote:
>
> 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
>
