关于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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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语句:使用策略模式优化代码结构