Question

I have this html:

<div class="task" id="1">
   Item1
</div>
<div class="task" id="2">
   Item2
</div>
<div class="task" id="3">
   Item3
</div>

And JavaScript load subitems. If i click on static item it is working. But if i click on loaded sub items, their subsubitems don`t load.

I created test page to show this: http://helloworld.dimkos.ru/

This code:

$(document).ready(function() {
$('.task').on('click', function(e){
    e.stopPropagation();
    var id = $(this).prop('id');
    var task = $(this);
    $.ajax({
        url: "./sub.php?sub=" + id,
        success: function(html) {
            $(task).append(html);
        }
    });
    return false;
});});

./sub.php?sub=1
append subitems which parent have id
Click on dynamically added subitems is not working.

Solved with $(‘.task’).live(“click”, function(e)

Answer 1

Modify your code like this and test it again:

$('.task').click(function(e){
    e.stopPropagation();
    var id = $(this).prop('id');
    alert(id);
});​

See if the first & second case is working or not, FIDDLE 🙂