zoukankan      html  css  js  c++  java
  • jQuery:delegate中select()不起作用的解决方法

    jQuery有一个很好用的delegate(事件委派)功能,可以给当前以及将来(动态添加)的元素绑定一个事件处理函数。

    比如下面的例子,动态添加一个输入文本框后,我想让所有文本框(不管是不是动态添加的)在获取焦点时,自动转大写。

    <!doctype html>
    <html>
    <head>
        <title>delegate测试</title>
    	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.js"></script>
    	<style type="text/css">
    		*{padding:0;margin:0;list-style:none;margin:5px}	
    	</style>
    
    	<script type="text/javascript">
    		//动态添加一行文本输入框
    		function addInput(){			
    			$("#ulTarget").append("<li><input type=\"text\" value=\"aaaaaa\"/></li>");			
    		}
    
    		
    		$().ready(function(){				
    			$("#ulTarget").delegate(":text","focus",function(){
    				$(this).val($(this).val().toUpperCase());
    			});			
    		})		
    	</script>
    </head>
    <body>
      <ul id="ulTarget">
    	<li><input type="text" value="123456abc"/></li>
    	<li><input type="text" value="123456abc"/></li>
    	<li><input type="text" value="123456abc"/></li>
    	<li><input type="text" value="123456abc"/></li>
      </ul>   
      <button id="btnAdd" onclick="addInput()">add input</button> 
    </body>
    </html>
    

     接下来,我还想加点小功能,在获取焦点时,还要让文本框自动全选。

    		$().ready(function(){				
    			$("#ulTarget").delegate(":text","focus",function(){
    				$(this).val($(this).val().toUpperCase()).select();
    			});			
    		})	
    

     但是实际测下来,.select()死活就是不起作用,无奈请出setTimeout

    		$().ready(function(){				
    			$("#ulTarget").delegate(":text","focus",function(){
    				var jqObj = $(this);
    				jqObj.val(jqObj.val().toUpperCase());
    				setTimeout(function(){jqObj.select();},100);
    			});			
    		})	
    

     解决了.

  • 相关阅读:
    常用的正则表达式
    VScode格式化代码,开启ESlint代码检测方法,eslint代码配置
    git 常用的操作
    vscode 格式化的时候自动添加分号怎么去除
    echarts渐变色实现方法
    echart 柱状图 数值较小的时候,文字显示不全
    iview的Modal在提交表单时确认按钮loading状态冲突问题解决方案
    vue.js动态获取菜单
    12.18 webSocket消息推送
    12.18 微信模板消息推送
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/2584137.html
Copyright © 2011-2022 走看看