on事件委托

最新推荐文章于 2022-08-12 13:20:16 发布

封闭火车

最新推荐文章于 2022-08-12 13:20:16 发布

阅读量367

点赞数

分类专栏： # Jquery # Js

本文链接：https://blog.csdn.net/growing1224/article/details/105494958

版权

Js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Jquery

3 篇文章 0 订阅

订阅专栏

首先看一段html代码

<body>
    <button id="addText">添加文本</button>
    <div id="alert">1</div>
</body>
<script>
    innerHtml = '<tr class="menus">' +
        '<td>我是测试文本<input type="checkbox" name="checkbox" class="checkAttrs" ></td>' +
        '</tr>';
    $('#addText').click(function () {
        $('#alert').html(innerHtml);
    });

    $('.checkAttrs').click(function () {
        alert("click方法");
    });
</script>

第一个click事件，即摁扭id为addText的事件是可以触发的，因为页面先有，再有绑定方法。

第二个click事件，即class为checkAttrs的事件不可触发，因为先有方法，页面是点击摁扭之后加的。

on事件委托:父元素接收委托事件

<body>
    <button id="addText">添加文本</button>
    <div id="alert">1</div>
</body>
<script>
    innerHtml = '<tr class="menus">' +
        '<td>我是测试文本<input type="checkbox" name="checkbox" class="checkAttrs" ></td>' +
        '</tr>';

    $('#addText').click(function () {
        $('#alert').html(innerHtml);
    });
    $("body").on('click', '.checkAttrs', function () {
        alert("on方法");
    });
</script>

封闭火车

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
on事件委托

首先看一段html代码<body> <button id="addText">添加文本</button> <div id="alert">1</div></body><script> innerHtml = '<tr class="menus">' + ...
复制链接

扫一扫