2017-11-29 jQuery中on('click')与click的区别

您现在的位置是: 首页 > WEB前端 >  jQuery中on('click')与click的区别

389次阅读

以下是用于测试二者 jQuery中on('click')与click区别的代码。

一、HTML页面


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
    <h1>展示jQuery中on()和click()的区别</h1>
</div>
<div>
    <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现,NewClick生成的Delete按钮行为用click()实现。</span>
</div>
<div class="test">
    <button class="new" id="new-on">NewOn</button>
    <button class="new" id="new-click">NewClick</button>
    <ul class="li">
        <li>原先的HTML元素on<button class="delete-on">Delete</button></li>
        <li>原先的HTML元素click<button  class="delete-click">Delete</button></li>
    </ul>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

    // 以下 二、js代码 
    
</script>
</html>


二、js代码


<script>

    $(document).ready(function () {
        // 动态添加的HTML元素on
        $("#new-on").click(function(){
            $(".li").append('<li>动态添加的HTML元素on<button class="delete-on">delete-on</button></li>');
        });
        // 动态添加的HTML元素click
        $("#new-click").click(function(){
            $(".li").append('<li>动态添加的HTML元素click<button class="delete-click">delete-click</button></li>');
        });

        // 原来页面的dom,可以删除
        $(".delete").click(function(){
            $(this).parent().remove();
        });

        // 后来页面生成的dom,不可以删除
        $(".li").on('click', ".delete-on", function(){
            $(this).parent().remove();
        });

        // 后来而来生成的dom,无法删除
        $(".delete-click").click(function(){
            $(this).parent().remove();
        });

    });

</script>


三、说明


1. 页面加载后,点击NewOn和NewClick按钮

2. 再尝试点击原来页面的几个删除按钮,也就是Delete按钮


四、现象


原先的HTML元素点击其身后的Delete按钮就会被删除。而动态添加的HTML元素,使用click()这种写法,点击Delete按钮无法删除;使用on('click')方式可以。


五、原因


element.click()这种写法不支持给动态元素或样式绑定事件。


六、注意点


使用.on('click')时注意,on前面的元素必须在页面加载的时候就存在DOM里面,如果没有,可以使用document,如 

$(document).on('click', ".delete-on", function(){
    $(this).parent().remove();
});