js动态创建页面元素后绑定的事件，在下次修改这些元素时如何恢复这些事件。

Question

我语言描述的不太清楚，举个例子来说明下。
这样一个模版<div id="body"></div>
我现在向body里追加一个div里面放一些内容，鼠标指向这个div时会出现一个编辑和删除的功能。
$("<div>123434</div>").appendTo($("#body")).hover(
function(){继续追加一个div上去，里面一个编辑按钮一个删除按钮},function(){移除掉这个编辑和删除功能的div}
);
这时页面变成这样<div id="body"><div>123434</div></div>.
然后我将<div>123434</div>会保存进数据库，用来生成页面。
然后这个模版还要可以修改的，打开编辑页面后我从数据库取出<div>123434</div>放进<div id="body"></div>里，这时hover事件由于这个div是从数据库取的，不是js来创建的，所以这个事件就没用了。
如何在绑定上这个事件呢。
由于模版内容很多，图片、文字、图片轮播、文章列表等等非常多东西，所以不可能加载模版后一个元素一个元素的在去绑定事件啊

Answer 1

@net_lover
这个模版做的不好啊，我这种做法直接导致这个问题。
求大神们来点好的做法啊

Answer 2

用js写，让js自己生成html元素

Answer 3

是这样做的，但是生成后的html元素是要可以修改的。

Answer 4

可以使用事件代理)委派).delegate()
http://www.css88.com/jqapi-1.9/delegate/

Answer 5

var el = Ext.getElementById( id );
el.addListener( {
    mouseover: function(evt,el,o) {
    }
} );

Answer 6

4楼的答案应该是你想要的。
利用js的事件委托机制，将监听器绑定到外层div上（就是你的id为body的），这样内部div的mouseover事件冒泡到外层div上时会被捕捉到并处理。写法如下：
$('#body').delegate('div','mouseover',function(){
    //你的处理函数
});
这句话只要写在页面加载完后执行就可以了。

Answer 7

<div class="generateDiv">123434</div>用一个属性标记一下生成的HTML，然后用delegatejs$('body').delegate('.generateDiv','mouseenter',function(){/*继续追加一个div上去，里面一个编辑按钮一个删除按钮*/}).delegate('.generateDiv','mouseleave',function(){/*移除掉这个编辑和删除功能的div*/});

Answer 8

恩，你的方法可行。我用jquery的live或者delegate这样绑定这些事件没问题。
现在还有一个问题，就是我的模版要求是可拖拽布局的，于是我使用了jqueryui的draggable和droppable。
和上面类似的问题。
我追加一个div到模版上，并且让这个div可以接收其他拖拽进去的元素。
$("<div class='xxx'>1234</div>").appendTo($("#body")).droppable({drop:......});
这个xxx的div拖拽到模版后，让他可以接收别的元素。这样一个特性不知道怎么来绑定呢，因为我保存的时候只保存了js追加上去的html，这个特性又没有类似mouseenter这样的具体的事件可以去绑定

Answer 9

算了，本来想有没有简单的方法之类的。
看来是没什么简单方法了。
最初我的想法是js的一些事件用jquery里面的on方法来绑定(live、delegate都行，1.9之后的版本删掉了live)。但是还有一些拖拽\排序等事件不知道如何绑定。
最终我的做法是模版上每种元素的事件在模版重新加载上去后都重新在写了一遍（发帖的目的就是不想做这一步），没有技术含量，只有大量的垃圾代码。
有大神有好的做法请留言，谢谢！