夏日博客

A-A+

Jquery中live支持多次click事件的实例

2016年01月12日 前端设计 暂无评论 阅读 5 views 次

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

Jquery中live支持多次click事件的实例如下:

  1. <script>  
  2.     $(function(){  
  3.             $('#public_ym_left').live('click',function(){  
  4.                 //<符号的右侧的第一个号  
  5.                            
  6.             var sibQ=$('#public_ym_left').next().text();  
  7.                        
  8.             if(sibQ>=1&&sibQ<=5) var start=1;  
  9.             if(sibQ>5)  
  10.                 var start=parseInt(sibQ)-4;  
  11.                        
  12.             $("#upage").children().remove();  
  13.             var childQ=$('<li id="public_ym_left"><a href=\'#\'" /a></li>');  
  14.             var childH=$('<li id="public_ym_right"><a href=\'#\'" /a></li>');  
  15.             var loage=$('<li><a href=\'#\'" /a></li>');    
  16.             $("#upage").append(childQ);  
  17.                        
  18.             for(var i=start;i<(start+5);i++)  
  19.             {  
  20.                 var son=$('<li><a id="page'+i+'" href=\'#\'" /a></li>');  
  21.                 $("#upage").append(son);  
  22.             }  
  23.                 $("#upage").append(loage);  
  24.                 $("#upage").append(childH);  
  25.                 $('#public_ym_left').unbind();  
  26.         });  
  27.                    
  28.         $('#public_ym_right').live('click',function(){  
  29.                        
  30.             var sibH=$('#public_ym_right').prev().prev().text();  
  31.                        
  32.                        
  33.             var start=parseInt(sibH);  
  34.             $("#upage").children().remove();  
  35.             var childQ=$('<li id="public_ym_left"><a href=\'#\'" /a></li>');  
  36.             var childH=$('<li id="public_ym_right"><a href=\'#\'" /a></li>');  
  37.             var loage=$('<li><a href=\'#\'" /a></li>');    
  38.             $("#upage").append(childQ);  
  39.                    
  40.             for(var i=start;i<(parseInt(start)+5);i++)  
  41.             {  
  42.                 var son=$('<li><a id="page'+i+'" href=\'#\'" /a></li>');  
  43.                 $("#upage").append(son);  
  44.             }  
  45.                 $("#upage").append(loage);  
  46.                 $("#upage").append(childH);  
  47.             $('#public_ym_right').unbind();  
  48.         });  
  49.                    
  50.     });  
  51. </script>  
  52.   
  53. <div>  
  54.     <ul id="upage">  
  55.       <li id="public_ym_left"><a href=\'#\'"  ></a></li>  
  56.            
  57.       <li><a id="page1" href=\'#\'" /a></li>  
  58.       <li ><a id="page2" href=\'#\'" /a></li>  
  59.       <li><a  id="page3" href=\'#\'" /a></li>  
  60.       <li ><a id="page4" href=\'#\'" /a></li>  
  61.       <li ><a id="page5" href=\'#\'" /a></li>  
  62.           
  63.      <li><a href=\'#\'" /a></li>  
  64.       <li id="public_ym_right"><a href=\'#\'" /a></li>  
  65.     </ul>  
  66.     <table border="0" cellpadding="0" cellspacing="0">  
  67.        <tr>  
  68.          <td width="64">跳转到第</td>  
  69.          <td width="57"><input name="" type="text" /></td>  
  70.          <td width="59">共<span>100</span>页</td>  
  71.        </tr>  
  72.     </table>  
  73. </div>  

Jquery中click事件重复执行的问题

问题:点击修改链接，在弹出的对话框中，点提交按钮，click事件会执行多次。而用原生js则没有问题,并且提交后，第二次提交后，多个数据都变成一个了,个人认为原因是：click事件里不能包含click事件？不知道是不是这样,为方便查看，附带整个文档.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">  
  3. <head>  
  4. <title>Document</title>  
  5. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
  6. <meta name="description" content="" />  
  7. <meta name="keywords" content="" />  
  8. <style type="text/css">  
  9.     * {margin: 0; padding: 0;}  
  10.     #table {border: 1px solid gray; border-colla<a href="/fw/photo.html" target="_blank">ps</a>e: collapse; width: 500px;}  
  11.     tr {height: 30px;}  
  12.     th {border: 1px solid gray;}  
  13.     td {border: 1px solid gray;text-align: center;}  
  14.     td a {margin-right: 5px; color: blue; text-decoration: none;}  
  15.     #popDiv, #editDiv {border: 1px solid silver; width: 315px; padding: 1px; margin-top: 10px; position: absolute; left: 38%; z-index: 4; display: none;}  
  16.     .pop p {height: 30px; margin-top: 20px; clear: both;}  
  17.     .pop a {display: block; float: right; text-decoration: none; font-size: 12px;}  
  18.     .pop .input {height: 20px; line-height: 20px;}  
  19.     /*#bottom {width: 100%; height: 30px; margin: 0 auto;}*/  
  20.     #sub {display: block; height: 30px; margin: 0 auto;}  
  21.     .mask {background-color: #000; position: absolute; left: 0; top: 0; z-index: 2;}  
  22. </style>  
  23. <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>  
  24. </head>  
  25. <body>  
  26.     <table id="table">  
  27.         <tr>  
  28.             <th>姓名</th>  
  29.             <th>年龄</th>  
  30.             <th>职位</th>  
  31.             <th>工资</th>  
  32.             <th>操作</th>  
  33.         </tr>  
  34.         <tr>  
  35.             <td>张三</td>  
  36.             <td>23</td>  
  37.             <td>PHP</td>  
  38.             <td>79999</td>  
  39.             <td><a href="#">修改</a></td>  
  40.         </tr>  
  41.         <tr>  
  42.             <td>李四</td>  
  43.             <td>21</td>  
  44.             <td>Java</td>  
  45.             <td>12000</td>  
  46.             <td><a href="#">修改</a></td>  
  47.         </tr>  
  48.         <tr>  
  49.             <td>王五</td>  
  50.             <td>34</td>  
  51.             <td>Python</td>  
  52.             <td>29999</td>  
  53.             <td><a href="#">修改</a></td>  
  54.         </tr>  
  55.         <tr>  
  56.             <td>赵六</td>  
  57.             <td>37</td>  
  58.             <td>Javascript</td>  
  59.             <td>65450</td>  
  60.             <td><a href="#">修改</a></td>  
  61.         </tr>  
  62.     </table>  
  63.     <div id="editDiv">  
  64.         <a href="#">close</a>  
  65.         <p><strong>姓名：</strong><input type="text" /></p>  
  66.         <p><strong>年龄：</strong><input type="text" /></p>  
  67.         <p><strong>职位：</strong><input type="text" /></p>  
  68.         <p><strong>工资：</strong><input type="text" /></p>  
  69.         <input type="button" id="sub" value="提交" />  
  70.     </div>  
  71.     <script type="text/javascript">  
  72.         // 点击'修改'链接  
  73.         $('a.edit').click(function () {                       
  74.             var arr = [];  
  75.             $(this).parent().siblings().each(function () {  
  76.                 arr.push($(this).text());  
  77.             });  
  78.             $('#editDiv').show().find('p').each(function (i) {  
  79.                 $(this).find('input:text').val(arr[i]);  
  80.             });  
  81.             var aTr = $(this);  
  82.             $('#sub').click(function () {  
  83.                 alert('2222222');  
  84.                 var data = [];  
  85.                 $(this).prevUntil('a.close').each(function () {  
  86.                     data.push($(this).find('input:text').val());  
  87.                 });  
  88.                 data.reverse();  
  89.                 aTr.parent().siblings().each(function (i) {  
  90.                     $(this).text(data[i]);  
  91.                 });  
  92.                 $(this).parent().hide();  
  93.                 $('div.mask').remove();  
  94.             });  
  95.             // 原生JS实现点击，没有问题  
  96.             /*document.getElementById('sub').onclick = function () {  
  97.                 alert('1111111');  
  98.                 var data = [];  
  99.                 $(this).prevUntil('a.close').each(function () {  
  100.                     data.push($(this).find('input:text').val());  
  101.                 });  
  102.                 data.reverse();  
  103.                 aTr.parent().siblings().each(function (i) {  
  104.                     $(this).text(data[i]);  
  105.                 });  
  106.                 $(this).parent().hide();  
  107.                 $('div.mask').remove();  
  108.             };*/    
  109.             // 添加遮罩层  
  110.             var maskHeight = $(document).height();  
  111.             var maskWidth = $(document).width();  
  112.             $('<div></div>').appendTo($('body'));  
  113.             $('div.mask').css({  
  114.                 'width':maskWidth,  
  115.                 'height':maskHeight,  
  116.                 'opacity':0.4  
  117.             });  
  118.         });  
  119.         $('a.close').click(function () {  
  120.             $(this).parent().hide();  
  121.             $('div.mask').remove();  
  122.         });  
  123.     </script>  
  124. </body>  
  125. </html>  

回答一:已经找到原因了，我提供个方法吧：

  1. $('#sub').unbind('click').click(function () {  
  2.     ...  
  3. });  

每次绑定前先取消上次的绑定。

回答二:找了好久，发现原因应该是：

Click事件 进行了累加绑定，每当我调用一次时，他便增加一次绑定,按这个方法，确实解决了问题。不知道是否正确。

标签：

给我留言