版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jiaotuwoaini/article/details/80389885
随着单页面应用的推广，有时候我们会发现明明我们绑定了一些东西但是结果并不像我们所想象的那样正常。今天我们来处理一个最基础的问题——DOM元素重名问题。
<!DOCTYPE html>
<html>
<head>
<title>111</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script>
</head>
<body>
<div style="float: left; width:50%; background-color: gray;" id="leftPannel">
<div id="text" style="height: 300px;">11</div>
</div>
<div style="float: left; width:50%; background-color: blue;" id="rightPannel">
<div id="text" style="height: 300px;">22</div>
</div>
</body>
</html>页面很简单一分为二的两个div，每个中间又包含了一个同名div#text。
我们一般会采取jquery默认的选择器语法：$("#text").on("click",function(){alert("hello")})
结果只有左边会有点击事件
我们可以看出来只获取了leftPannel#text
现在我们提供两种方式
$("#leftPannel").on("click",$("#text"),function(){
alert("hello,left")
})
$("#rightPannel").on("click",$("#text"),function(){
alert("hello,right")
})$("#leftPannel").find("#text").on("click",$("#text"),function(){
alert("hello,left")
})
$("#rightPannel").find("#text").on("click",$("#text"),function(){
alert("hello,right")
})