Jquery on()和click()的区别

最新推荐文章于 2023-08-01 14:27:18 发布

|Mark|

最新推荐文章于 2023-08-01 14:27:18 发布

阅读量468

点赞数 2

分类专栏：知识点文章标签： javascript jquery html html5

本文链接：https://blog.csdn.net/qq_50253227/article/details/116846938

版权

知识点专栏收录该内容

21 篇文章 1 订阅

订阅专栏

理清两者的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <!--
    on() 和 click() 的区别:
    二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。
    以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除
    而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。
    -->
    <script >
        $(function () {

            /**
            *append():父元素将子元素追加到末尾
            *  对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
            */
            //新增一个li元素，里面加了一个删除按钮
            $("#newon").click(function(){
                $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>');
            });
            //新增一个li元素，里面加了一个删除按钮
            $("#newclick").click(function(){
                $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>');
            });

            /**on事件解析:
             * $(selector).on(event,childSelector,data,function)
             * 参数	描述
             event	必需。规定要从被选元素添加的一个或多个事件或命名空间。
             由空格分隔多个事件值，也可以是数组。必须是有效的事件。
             childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
             data 可选。规定传递到函数的额外数据。
             function 可选。规定当事件发生时运行的函数。
             */
            /**parent():方法返回被选元素的直接父元素
             * remove():移除元素
             *   对象.remove():将对象删除掉
             * 组合起来：将用到li属性的标签的父元素删除
             * */
            $(".li").on('click', ".deleteon", function(){
                $(this).parent().remove();
            })
            //点击这个是删不掉动态添加进来的控件的
            $(".deleteclick").click(function(){
                $(this).parent().remove();
            });
        })
    </script>
</head>
<body>
<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>
</html>