jQuery 事件委托

我们在绑定事件时(比如点击事件),只能绑定在HTML页面已有的元素上(比如下方html里的

上),当使用jQuery创建新的div元素时,新的元素便没有这个事件,如果我想还有,那怎么办,这里就得用到事件委托。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery事件委托</title>

    <script src="jquery.js"></script>

    <style>

        div{

            width:100px;

            height:100px;

            border:1px solid #fff;

            background:red;

            margin:5px;

            float:left;

        }

    </style>

</head>

<body>

    <form action="">

        <input type="button" value="点击增加div" id="btn">

    </form>

    //原有的div元素

    <div id="div1"></div>

    <script>

    //点击创建新的div元素

        $('#btn')  .click(function(){

            $('<div></div>').appendTo($('body'));

        })

    //为元素附上点击事件,当点击元素时,背景颜色改变,对新添加元素无效

        $('div').click(function(){

            $(this).css('background','green');

        })

    // 事件委托

        $(document).on('click','div',function(){

            $(this).css('background','green');

        })

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,024评论 1 45
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,873评论 0 3
  • 元旦过后,新年第一篇。初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己...
    color_小浣熊阅读 6,893评论 0 4
  • JavaScript(jQuery)中的事件委托 一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件...
    你为什么无理取闹阅读 2,790评论 0 2
  • 选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 3,355评论 0 1