Jqeury的事件传递 丢失分析
2008-05-07 03:54 废墟中的垃圾 阅读(392) 评论(2) 收藏 举报
今天要做一个像校内网那样的留言效果。
点击留言按钮,这个时候ajax递交数据。但是在UI层,先把这个留言展示出来。如果仅仅是这个效果,那么很容易就实现了。如果在这个展示的地方出现了一些响应事件,例如删除这样的按钮的话。麻烦就来了。
例如这里有一个
ReplyList 的 列表Div容器
还有一个 ReplyDemo 的用于被附加的容器Div。这个容器里面有一个Del用于删除这条记录的<a>。
那么最初的做法是
$("#ReplyDemo Del").click(fn);
然后
$("#ReplyList").prepend($("#ReplyDemo Del").html());
这个时候发现问题出来了,用于做Demo的Div里面的 Del有了click事件,但是被附加后的Del,并没有把事件传递过去。这里考虑一下,首先Jquery进行文档处理的时候会把当前文档的属性和对象在文档内完成,而事件只是一个追加的事件,并不进行文档处理,所以出现了click丢失()(这里仅仅是个人观点,不代表官方。同时这里测试的时候把追加前的ReplyDemo、ReplyList ,追加后的ReplyDemo、ReplyList 都进行文档分析,然后得出了以上结论。)
同时这里需要说明的是,值传递和引用传递的问题。虽然总是给别人讲,今天自己也范了一次这样的错误,但是很快就被发现,呵呵。
比如
for(i=0;i<10;i++)
{
$("#value").text($("#value").text + i);
$("#demo" + i).click(function(){
alert($("#i").text());
})
}
这个程序的基本想法是,循环10次给10个demo 的对象 附加click 事件,demo1 弹出 $("#value").的值 + "1"
假设$("#value").text() 初始为 空
但是实际上,你会发现所有的demo对象弹出的都是 "0123456789"这个字符串,为什么呢?因为这里进行了引用传递。
那正确的方法是什么呢?
var a;
for(i=0;i<10;i++)
{
a = $("#value").text($("#value").text + i);
$("#demo" + i).click(function(){
alert(a);
})
}
大家可以看一下,仅仅是一个变量的差别,就从引用传递,变成了值传递。
希望可以个Jqeury的初学者一些帮助。
点击留言按钮,这个时候ajax递交数据。但是在UI层,先把这个留言展示出来。如果仅仅是这个效果,那么很容易就实现了。如果在这个展示的地方出现了一些响应事件,例如删除这样的按钮的话。麻烦就来了。
例如这里有一个
ReplyList 的 列表Div容器
还有一个 ReplyDemo 的用于被附加的容器Div。这个容器里面有一个Del用于删除这条记录的<a>。
那么最初的做法是
$("#ReplyDemo Del").click(fn);
然后
$("#ReplyList").prepend($("#ReplyDemo Del").html());
这个时候发现问题出来了,用于做Demo的Div里面的 Del有了click事件,但是被附加后的Del,并没有把事件传递过去。这里考虑一下,首先Jquery进行文档处理的时候会把当前文档的属性和对象在文档内完成,而事件只是一个追加的事件,并不进行文档处理,所以出现了click丢失()(这里仅仅是个人观点,不代表官方。同时这里测试的时候把追加前的ReplyDemo、ReplyList ,追加后的ReplyDemo、ReplyList 都进行文档分析,然后得出了以上结论。)
同时这里需要说明的是,值传递和引用传递的问题。虽然总是给别人讲,今天自己也范了一次这样的错误,但是很快就被发现,呵呵。
比如
for(i=0;i<10;i++)
{
$("#value").text($("#value").text + i);
$("#demo" + i).click(function(){
alert($("#i").text());
})
}
这个程序的基本想法是,循环10次给10个demo 的对象 附加click 事件,demo1 弹出 $("#value").的值 + "1"
假设$("#value").text() 初始为 空
但是实际上,你会发现所有的demo对象弹出的都是 "0123456789"这个字符串,为什么呢?因为这里进行了引用传递。
那正确的方法是什么呢?
var a;
for(i=0;i<10;i++)
{
a = $("#value").text($("#value").text + i);
$("#demo" + i).click(function(){
alert(a);
})
}
大家可以看一下,仅仅是一个变量的差别,就从引用传递,变成了值传递。
希望可以个Jqeury的初学者一些帮助。
                    
                
                
            
        
浙公网安备 33010602011771号