区别:1、【click()】属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件;2、【on()】属于动态加载,当页面加载完,可以为新增加的元素添加事件,但是必须选定父级元素。
相关推荐:《jQuery教程》
jquery中on()与click()的区别
click()
属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。
on()
属于动态加载,当页面加载完,可以为新增加的元素添加事件,但是必须选定父级元素。
二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 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中文网其他相关文章!