关于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