jquery 的on事件用法

海涛高软

于 2021-10-15 17:55:38 发布

阅读量503

点赞数 1

分类专栏： javascript 文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_15267341/article/details/120788141

版权

javascript 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

通过选择器字符串来过滤匹配元素的子元素中哪些可以响应绑定的事件。代码中，类名为children的元素和它的子元素可以调用绑定的事件。

<!DOCTYPE html>
<html>

<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.jb51.net/" />
    <title>脚本之家</title>
    <style type="text/css">
        .parent {
            width: 160px;
            height: 160px;
            border: 1px solid green;
            font-size: 12px;
        }
        
        .children {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        
        span {
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            //增加过滤，类名为children的元素和它的子元素可以调用绑定的事件
            // $(".parent").on("click", ".children", function() {
            //     console.log(this);
            //     $(this).text("xuhaitao1");
            //     console.log(this);
            // })


            //利用data参数为绑定的事件处理函数传递数据
            $(".parent").on("click", ".children", {
                    namee: "xuhahunkxu"
                },
                function(e) {
                    $(this).text(e.data.namee);
                })
        })
    </script>
</head>

<body>
    <div class="parent">
        <div class="children"><span>原来内容</span></div>
    </div>
    <span>大家好</span>
</body>

</html>

FR：徐海涛(hunk Xu)
QQ技术交流群：386476712

海涛高软

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 的on事件用法

通过通过选择器字符串来过滤匹配元素的子元素中哪些可以响应绑定的事件。代码中，类名为children的元素和它的子元素可以调用绑定的事件。<!DOCTYPE html><html><head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title>
复制链接

扫一扫