jq事件

最新推荐文章于 2024-01-16 21:34:20 发布

转载最新推荐文章于 2024-01-16 21:34:20 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lujieting/p/10110790.html

本文介绍如何利用jQuery在网页中动态添加新的p元素到指定的div内，并为这些元素注册点击事件。通过delegate方法，即使是在页面加载后动态创建的元素也能成功绑定事件，实现更丰富的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
        #box {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>

<!--点击按钮，在div里面创建一个新的p元素-->
<input type="button" value="按钮" id="btn">

<div id="box">
    <div>
        <span>呵呵</span>
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <p>44444</p>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //简单事件，给自己注册的事件 缺点：一次只能注册一个事件
        $("div").click(function () {
         alert("哈哈");
       });

        //bind方式
       $("p").bind({
         click:function () {
           alert("呵呵")
         },
         mouseenter:function () {
           alert("哈哈")
         }
       });


        $("#btn").click(function () {
            $("<p>我是新增加的p元素</p>").appendTo("div");
        });

        //delegate:代理，委托
        //1. 给父元素注册委托事件，最终还是有子元素来执行。

        //要给div注册一个委托事件,但是最终不是由执行，而是有p执行
        //第一个参数：selector:事件最终由谁来执行。
        //第二个参数：事件的类型
        //第三个参数：函数，要做什么

        //1. 动态创建的也能有事件 :缺点：只能注册委托事件

        $("#box").delegate("p", "click", function () {
            //alert("呵呵");
            console.log(this);
        });

    });
</script>

转载于:https://www.cnblogs.com/lujieting/p/10110790.html