动态加载的页面元素，点击事件不触发的解决办法

最新推荐文章于 2024-05-18 17:27:17 发布

司司司-

最新推荐文章于 2024-05-18 17:27:17 发布

阅读量1.9k

点赞数 2

分类专栏：前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/siguangsong/article/details/123181429

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先看一下 jQuery中： $(“元素”).click() 和 $(document).on(‘click’,‘元素’,function(){})的区别

$(“元素”).click(function(){})
当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
    $(function(){
        $('ul>li').click(function(){
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>
</body>

结果如下：后面动态创建的5和6，没法进行点击事件触发。

在这里插入图片描述

$(document).on(‘click’,‘元素’,function(){})

on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
    $(function(){
        $('body').on('click','ul>li',function(){
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>
</body>