Jquery之美中不足--之三----delegate的缺憾

jquery的delegate有好几个缺憾。----或许是因为sizzle少提供了以refEl为参考、一个按selector来筛选els的filter(els,selector,refEl)的功能，jq需要自己去实现类似的功能。
其一：selector是基于:root的，而不是:scope的。所以，在写代码时，需要带上scrope的定位部分。----注：:root指document根节点，:scope指代理节点
例如，代理div1的儿子，需要这样写：
$('#div1').delegate('#div1>*','click',fun});
而不是这样写：
$('#div1').delegate('>*','click',fun});
示例代码如：

View Code

<HTML><HEAD><TITLE>JK Test</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type> 
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div1" >div1
    <div id="div1_1" >div1_1
        <div id="div1_1_1" >div1_1_1
            <span style="color:red">span</span>
        </div>
    </div>
    <div id="div1_2" >div1_2
    </div>
</div>
</body>
<script type="text/javascript">
$('#div1').delegate('#div1>*','click',function(){alert(this.innerHTML);});//点击div1_1，div1_2或时，都有效。
</script>
</HTML>

其二：多个祖先满足条件时，只触发了target的closest的那一个祖先，而不是都触发。----想不通jquery为什么要采用这个策略
示例代码如：

View Code

<HTML><HEAD><TITLE>JK Test</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type> 
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div1" >div1
    <div id="div1_1" >div1_1
        <div id="div1_1_1" >div1_1_1
            <span style="color:red">span</span>
        </div>
    </div>
    <div id="div1_2" >div1_2
    </div>
</div>
</body>
<script type="text/javascript">
$('body').delegate('div','click',function(){alert(this.innerHTML);});//点击id1_1_1时，应该同时代理到三个div的点击
</script>
</HTML>

其三：与sizzle一样，可能是没有回溯，在某些情况下有bug。
例如，当span有多个祖先是div时，这个代理会失效：$('body').delegate('body>div span','click',fun;});
示例代码如：

View Code

<HTML><HEAD><TITLE>JK Test</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type> 
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div1" >div1
    <div id="div1_1" >div1_1
        <div id="div1_1_1" >div1_1_1
            <span style="color:red">span</span>
        </div>
    </div>
    <div id="div1_2" >div1_2
    </div>
</div>
</body>
<script type="text/javascript">
$('body').delegate('body>div span','click',function(){alert(this.innerHTML);});//点击span时，应该出现alert的
</script>
</HTML>

posted on 2011-05-12 14:52 JKisJK 阅读(9944) 评论(2) 编辑收藏举报

刷新页面返回顶部

JKisJK

Jquery之美中不足--之三----delegate的缺憾

导航

公告