Jquery点击事件大全、Jquery为态添加的元素绑定事件

最新推荐文章于 2024-07-14 03:40:57 发布

GllWyz

最新推荐文章于 2024-07-14 03:40:57 发布

阅读量1.9k

点赞数 1

分类专栏： # Jquery 文章标签： jquery 为动态创建的元素绑定点击事件 jquery点击事件

本文链接：https://blog.csdn.net/zhumizhumi/article/details/78421103

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、jquery的四种点击事件

<body>
    <div id="ClickCeshi" onclick="dianjishijian()">jsuery点击事件测试</div>
</body>

<script>
    //  方法一
    $("#ClickCeshi").click(function () {
      console.log("第一种点击事件")
    })
    //  方法二
    $("#ClickCeshi").on("click",function(){
      console.log("第二种点击事件")
    })
    //  方法三
    $(document).on("click",'#ClickCeshi', function(){
      console.log("第三种点击事件")
    })
    //  方法四
    function dianjishijian () {
      console.log("第四种点击事件")
    }

</script>

二、jquery为态添加的元素绑定事件的三种方法（全部进行了测试）

<body>
    <div class="modal-footer"></div>
</body>

<script>
    var html1=''
    html1 +=`<div>
      <div class="sure" onclick="ceshi()">点击测试</div>
    </div>`
    $('.modal-footer').append(html1);
    // 方法一
    $('.sure').on('click',function(){console.log("动态事件方法一");});
    // 方法二
    $('.modal-footer').on('click','.sure',function(){console.log("动态事件方法二");});
    // 方法三
    function ceshi () {
      console.log("动态事件方法三")
    }

</script>

注意：on事件比click和onclick事件的通用性强，在有些地方用click和onclick事件行不通时，要尝试去用on事件来解决