<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
            margin: 0px;
            padding: 0px;
            list-style: none;
            width: 600px;
        #mylist li{
            margin-bottom: 10px;
            padding: 20px;
            border: 2px solid #ccc;
        #mylist li.current{
            background-color: orange;
    <ul id="mylist">
    <input type="text" value="" id="info"><button id="btn">添加</button>
    <script src="../jqueryFile/jquery-3.4.1.js"></script>
        $(function (){

            // 事件委派 即使ul添加新的li,新的li也有even事件
            $("#mylist").on("mouseover","li",function (){
            $("#mylist").on("mouseout","li",function (){

           // 再ul下添加li,
            $("#btn").click(function (){
Last modification:July 5th, 2019 at 01:21 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment