$().click()和$().on('click','要选择的元素'，function(){})的区别

最新推荐文章于 2022-06-24 16:56:47 发布

转载最新推荐文章于 2022-06-24 16:56:47 发布 · 1.4w 阅读

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文通过实例详细解析了jQuery中事件委托的使用方法，对比了直接绑定事件与使用on方法的区别，尤其是在动态添加元素时，如何确保新元素也能响应事件。

$(选择器).click(function(){})：页面中已经存在的DOM。

$(ducument).on(‘click’,‘要选择的元素’,function(){})：动态创建的元素也能触发事件，
且ducument在页面已经存在，而不是动态添加的。

on方法包含很多事件，点击，双击等等事件。

下面举例子说明：

//CSS可忽略
<!doctype html>
<html>
<head>
    <style>
    ul{
        list-style: none;
        display: flex;    
    }
    ul li{
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: pink;
        font-weight: bold;
        border: 1px solid #eee;
    }
    ul li:hover{
        cursor: pointer;
    }
</style>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
<script>
    /* 
     $('li').click(function(){
             alert($(this).text())
     })
     $('ul').append('<li>6</li>')
    */

     
    //上面这段js运行后，第6个li添加了进去，但是没有click点击事件
    
    //----------- 分割线 --------------
    //ul是已经存在的
    $('ul').on('click','li',function(){//这里改为用on()方法，第6个li也有了点击事件
        alert($(this).text())          
    })
    $('ul').append('<li>6</li>')
</script>
</body>
</html>