• 技术文章 >web前端 >js教程

    jquery中on()与click()的区别是什么?

    青灯夜游青灯夜游2020-11-30 17:18:04原创47

    区别:1、【click()】属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件;2、【on()】属于动态加载,当页面加载完,可以为新增加的元素添加事件,但是必须选定父级元素。

    相关推荐:《jQuery教程

    jquery中on()与click()的区别

    二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。

    以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素,使用 click() 这种写法,点击 Delete 按钮无法删除;使用 On() 方式可以。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    	</head>
    
    	<body>	
    		<h1>展示jQuery中on()和click()的区别</h1>
    
    		<p>
    			<span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现,NewClick生成的Delete按钮行为用click()实现。</span>
    		</p>
    		<div class="test">
    			<button class="new" id="newon">NewOn</button> 
    			<button class="new" id="newclick">NewClick</button>
    			<ul class="li"> 
    				<li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
    				<li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
    			</ul> 
    		</div>
    	</body>
    		<script type="text/javascript">
    			$("#newclick").click(function(){ 
    				$(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
    			});
    			$("#newon").click(function(){ 
    				$(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 
    			});
    			$(".delete").click(function(){ 
    				$(this).parent().remove(); 
    			}); 
    			
    			$(".li").on('click', ".deleteon", function(){
    				$(this).parent().remove(); 
    			})
    			$(".deleteclick").click(function(){ 
    				$(this).parent().remove(); 
    			});
    		</script>
    </html>

    更多编程相关知识,请访问:编程教学!!

    以上就是jquery中on()与click()的区别是什么?的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:jquery on() click()
    上一篇:jquery和React的区别是什么? 下一篇:jquery有克隆方法吗?
    第14期线上培训班

    相关文章推荐

    • jquery怎么改变this指向• vue.js支持jquery吗?• jquery有哪些框架• jquery如何显示和隐藏元素• jquery如何进行字母大小写转换?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网