jQuery使用html（）设置内容后，如何使new元素事件和原始元素绑定同一事件？

Question

HTML:

<div id="1">
<div>
<ul>
<li><button id="button">a</button></li>
<li><span>1</span></li>
</ul>
</div>
</div>
<div id="2">
<ul>
<li></li>
</ul>
</div>

JQUERY:

$("#button").live("click",function(){
var s = Number($(this).parents("ul").find("span").text());
$(this).parents("ul").find("span").text(s+1);
$("#2 li").html($("#1 li").html());
});

The problem is that when I click on the button , span's number add number 1 and DIV#2 set up a new button , how can i add DIV#1 span number when i click DIV#2 new , I means how this function can find the right parents and span?

here is DEMO

i want to add number 1 when i click new button ,that's all,thanks!

Answer 1

You can check changed Demo .

$("#button").live("click",function(){        
    var span = $('#1 span');
    span.html(Number(span.html())+1);    
    $("#2 li").html($("#1 li").html());
});