关于JS嵌套点击事件的问题。

$().click()  是点击命令
$().click(function(){代码}) 是绑定click事件,并不会直接运行。所以在嵌套的时候就有可能出现重复绑定的问题。下面是使用jsonp跨站访问代码
复制代码
 1    myChart.on('click', function (params) {
 2             var totalCount = 0;
 3             var objectGidName = new Object();
 4             var listr = "";
 5             var lastinstancecourt = "";
 6             lastinstancecourt = params.value.toString().substring(2);
 7             $.ajax({
 8                 type: "get",
 9                 url: "http://localhost:60360/Test/ReadCaseChinaList",
10                 dataType: "jsonp",
11                 jsonp: "jsonpcallback",//指定回调函数,这里名字可以为任意
12                 data: "category=00301&lastInstanceCourt=" + lastinstancecourt + "&jsonpcallback=?",
13                 success: function (json) {
14                     $('.m-r ul li').remove();
15                     if (json != "") {
16                         var jsons = eval('(' + json + ')');
17                         var obj = jsons.Data;
18                         totalCount = obj.length;
19                         for (var i = 0; i < obj.length; i++) {
20                             objectGidName[obj[i].Gid] = obj[i].Title;
21                             listr = "<li><a href=http://www.pkulaw.cn/case/pfnl_" + obj[i].Gid + ".html?match=Exact>" + obj[i].Title + "</a></li>";
22                             $('.m-r ul').append(listr);
23                         }
24                     }
25                     totalpart.innerText = params.name + "(" + totalCount +")";
26                 }
27             });
28             $('.m-l li').on('click', function () {
29                 var totalCount = 0;
30                 var objectGidName = new Object();
31                 var listr = "";
32                 var categorynow = $(this).find('a').attr('cluster_code');
33                 $.ajax({
34                     type: "get",
35                     url: "http://localhost:60360/Test/ReadCaseChinaList",
36                     dataType: "jsonp",
37                     jsonp: "jsonpcallback",//指定回调函数
38                     data: "category=" + categorynow + "&lastInstanceCourt=" + lastinstancecourt + "&jsonpcallback=?",
39                     success: function (json) {
40                         $('.m-r ul li').remove();
41                         if (json != "") {
42                             var jsons = eval('(' + json + ')');
43                             var obj = jsons.Data;
44                             totalCount = obj.length;
45                             for (var i = 0; i < obj.length; i++) {
46                                 objectGidName[obj[i].Gid] = obj[i].Title;
47                                 listr = "<li><a href=http://www.pkulaw.cn/case/pfnl_" + obj[i].Gid + ".html?match=Exact>" + obj[i].Title + "</a></li>";
48                                 $('.m-r ul').append(listr);
49                             }
50                         }
51                         totalpart.innerText = params.name + "(" + totalCount + ")";
52                     }
53                 });
54             });
55         });
复制代码

 

解决办法:
(1)使用unbind("click")先解除事件然后绑定新事件
复制代码
 1   <script>
 2             $(function(){
 3                 $("#test").click(function(){
 4                     $("#test").unbind('click').click(function(){
 5                         alert("内部click执行");
 6                     });
 7                     alert("外部click执行");
 8                 });
 9             })
10         </script>
复制代码

(2)使用die()在live()前将绑定的事件都解除掉

复制代码
 1         <script>
 2             $(function(){
 3                 $("#test").die().live("click",function(){
 4                     $("#test").die().live("click",function(){
 5                         alert("内部click执行");
 6                     });
 7                     alert("外部click执行");
 8                 });
 9             })
10         </script>
复制代码

--参考地址:http://www.phpddt.com/dhtml/jquery-click-problem.html 



posted @   BOBO~  阅读(6764)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示