Question

I have a page

<div id="aar">  
    <div id="stack0" class="stack">stack1</div>
    <div id="stack1" class="stack">stack1</div>
    <div id="stack2" class="stack">stack1</div>
</div>

in which the following script run

$(document).ready(function(){
    $(".stack").click(function(){
       $("#aar").html($("#aar").html()+'ann');
    });
});

The .stack click function run only one time.Why?

Answer 1

This is due to you replaced the old dom with the new one, and the new one don’t have bounded click event handler.

And you could just append the new content by using .append method.

$(document).ready(function(){
    $(".stack").click(function(){
        $("#aar").append(this.id);
    });
});