转自:http://www.cnblogs.com/sunjing/archive/2008/12/04/1347641.html
这两天做一个管理系统页面的时候遇到一个问题,有的时候需要动态把一个元素复制几个出来,例如添加联系地址,有的时候有几个地址,那么可以动态的添加、删除地址个数。
做添加的功能并不复杂,只需要在添加按钮上绑定事件就可以了,但是做删除的时候就让我折腾了好久,除非把删除的功能代码写在HTML里,否则如果用JQ做的事件绑定就会失效,想想也是,JQ绑定的时候DOM里并没有这个元素,所以之后生成出来的元素并不能绑定上。
折腾N久无结果后,今天向高手求助,得到一段JQ的代码:
// 点击添加按钮后,自动找父节点中的.tableTemplet,追加到父节点
$(".templetAdd").click(function (){
var oContent= this.parentNode;
$($(oContent).find(".tableTemplet").html()).appendTo(oContent).find('.templetDel').click(function() {
$(this).parents('table:eq(0)').remove();
});
});
});
这段代码的重点是从第二个find开始,它在更新了DOM后,利用JQ的函数链又做了一次绑定
jQuery Live Query 插件
上篇日志里写到的那个问题其实有种更简单的解决办法,就是使用jquery的Live Query 插件,网上有些该插件的使用方法,它每隔20毫秒会对DOM里的元素重新来一次事件绑定,老早就知道它,但是一直不知道具体用法,前几天解决的问题的时候也用过live query,但是没弄出来。。汗一个。。。
今天上网继续搜索,终于在一个网站:http://brandonaaron.net/docs/livequery/里找到了它另一种用法,成功的解决了问题。
使用方法1(这种方法测试没通过):
$('a')
.livequery('click', function(event) {
alert('clicked');
return false;
});
使用方法2(测试通过):
$('li')
.livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this)
.hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
brandonaaron.net网站貌似是一个JQ插件的索引网站,里面有好多插件的资料,站长是好人啊!
现在的Jquery团队有主要开发人员,推广人员,UI,插件开发,网站设计维护,其中3个主要开发人员分别是:两个美国人JohnResig/BrandonAaron,一个德国人JornZaefferer)
刚在网上找到的。。原来BrandonAaron是JQ的主力开发人员,致敬!!!