• js 事件的递归调用


    递归绑定法(recursive binding)。jQuery里的.bind()方法,其实是一种对事件处理的通用写法。

    例如点击事件:.click(), 可以写成.bind(‘click’)。而.unbind(),顾名思义就是解除事件处理。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>jQueryPad Preview</title>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
    		
    		<style type="text/css">
    		
    		body
    		{
    		    font-family: Segoe UI;
    		    font-size: 10pt;
    		    background: white;
    		}
    		
    		</style>
    		
    		<script type="text/javascript">
    
    function addItem() {
      $('#list1 li button')
      .unbind('click')//解除click事件
      .bind('click', function(){
      var $newLi = $('<li><button>新按钮</button></li>');
      $(this).parent().after($newLi);
      addItem();//使用递归函数重新赋值
      });
    }
    $(document).ready(function() {
      addItem();
      // 以下是原始事件绑定
      $('#list1 li button').click(function() {
      $(this).after('原始绑定');
      });
    });
    
            </script>
    		
        </head>
    	<body>
    
     <div>
       <ul id="list1">
         <li>非按钮 </li>
         <li><button>点击我</button> </li>
       </ul>
     </div>
    
        </body>
    </html>
    

    通过上面的演示,你可能发现一个问题:点击最初的按钮,你没有看到“原始绑定”这几个字别加在按钮后面。

    虽然在代码里,我定义了原始事件捆绑,但是在递归函数addItem()里,这原始事件被解除(unbind)了。

    如何让unbind函数只解除新的事件而保留原始事件呢。其中一种办法是,使用“命名空间”(namespacing)

    function addItemNS() {
    
      $('#list2 li button')
    
      .unbind('click.addit')//这里加上了addit,建立命名空间
    
      .bind('click.addit', function() {
    
        var $newLi = $('<li  > <button>新按钮</button></li>');
    
        $(this).parent().after($newLi);
    
        addItemNS();
    
      });
    
    }
    
    $(document).ready(function() {
    
      addItemNS();
    
      //原始事件捆绑
    
      $('#list2 li button').click(function() {
    
      $(this).after('原始捆绑');
    
      });
    
    });

      

  • 相关阅读:
    hdu5321 beautiful set(莫比乌斯反演)
    BZOJ 5104 Fib数列(二次剩余+BSGS)
    高次同余方程,二次同余方程学习笔记
    CF587F Duff is Mad(AC自动机+树状数组+分块)
    51nod 麦克打电话(AC自动机+树状数组)
    BZOJ 3881 [Coci2015]Divljak(AC自动机+树状数组)
    51nod 1526 分配笔名(Trie树+贪心)
    BZOJ 3790 神奇项链(回文自动机+线段树优化DP)
    CF666E Forensic Examination(后缀自动机+线段树合并)
    [HAOI2016]找相同字符(SAM+DP)
  • 原文地址:https://www.cnblogs.com/yanypan/p/2540159.html
Copyright © 2020-2023  润新知