如何在javascript中为ul创建动态单击事件侦听器_Javascript_Jquery_Html_Css

如何在javascript中为ul创建动态单击事件侦听器

javascript jquery html css

如何在javascript中为ul创建动态单击事件侦听器,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一份ul（无序列表）和许多李的。li是动态创建的。因此，需要动态实现click事件监听器。这在jQuery中很容易做到 $(document).on("click", ".checkboxes", function() { var boxId = $(this).attr("id"); var num = boxId.split("-")[1]; console.log("checkbox: "+num); // checkedItem(num); va

我有一份ul（无序列表）和许多李的。li是动态创建的。因此，需要动态实现click事件监听器。这在jQuery中很容易做到

$(document).on("click", ".checkboxes", function() {     
   var boxId = $(this).attr("id");
   var num = boxId.split("-")[1];
   console.log("checkbox: "+num);
  // checkedItem(num);
   var checkedLi = document.getElementById("li-"+num);
   checkedLi.style.textDecoration = "line-through";
});

但是，我希望我的应用程序完全使用javascript。如果有人能提供答案。感激这是在线应用程序 inde.html

<!DOCTYPE html>
<html>
<head>
    <title>TodoList App</title>
    <!-- bootstrap cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">

    <style type="text/css">
        /*variables*/
        :root {
            --righteous-font: 'Righteous', cursive;
        }

        body {
            /*background-color: #536691;*/
            background-image: url("http://pctechtips.org/apps/conf/img/Chicago-Wallpaper-3.jpg");
            min-height: 100vh;
            z-index: -10;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            font-size: 1.3rem;          
        }
        .hero {
            position: absolute;
            min-height: 100vh;
            min-width: 100vw;
            top: 0;
            bottom: 0;
            background-color: rgba(31, 34, 118, 0.5);
        }

        h1 {
            margin-top: 12rem;
            margin-bottom: 0px;
            padding-bottom: 0px;
            font-family: var(--righteous-font);
        }

        .lead {
            font-size: 1.5rem;
            font-family: var(--righteous-font);
        }
        hr {
            margin-top: 2rem;
            border: 1px solid white;
            display: none;
        }
        ul {
            /*border-top: 2px solid white;*/
            margin-top: 2rem;
            list-style: none;
            /*display: none;*/
        }
        li {
            border-bottom: 1px solid white;
            padding: 0.5rem 0 0.5rem 0;
            margin: 0 1rem 0 1rem;
        }
        .checkboxes {
            float: right;
            line-height: 15px;
            width: 17px;
            height: 17px;
            background-color: #e9ecef;
            border: 1px solid #e9ecef;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div class="hero">
        <div class="container">
            <h1 class="display-2 text-center">TodoList</h1>
            <p class="lead text-center">Welcome to my todoList applications</p>
            <div class="row">
                <form id="form" class="col-8 mx-auto">
                    <div class="input-group">
                        <input id="input" class="form-control" placeholder="Enter todo list item" value="this is a todo list item for me todo">
                        <span>
                            <button id="btn" type="button" class="btn btn-primary">Submit</button>
                        </span>
                    </div>               
                </form>
            </div>  
            <hr>        
            <div class="row">               
                <ul id="list" class="list col-8 mx-auto">
                    <!-- <li>this is a todo item <input type="checkbox" class="checkbox"></li>
                    <li>this is a todo item <input type="checkbox" class="checkbox"></li> -->
                </ul>
            </div>

        </div>
    </div>

    <!-- todolist app functionality -->
    <script type="text/javascript">
        window.onload = function() {
            // variables
            var submitBtn = document.getElementById("btn");
            var ul = document.getElementById("list");
            var todoItem = document.getElementById("input");
            var hr = document.getElementById("hr");
            var id = 1;

            //button event listener
            submitBtn.addEventListener("click", addTodoItem);

            //dynamically added checkbox event listener
            $(document).on("click", ".checkboxes", function() {     
                var boxId = $(this).attr("id");
                var num = boxId.split("-")[1];
                console.log("checkbox: "+num);
                // checkedItem(num);
                var checkedLi = document.getElementById("li-"+num);
                checkedLi.style.textDecoration = "line-through";
            }); 


            /* add todo items to list */
            function addTodoItem() {
                console.log(todoItem.value);
                if(todoItem.value === "") {
                    alert("Enter some text!");
                }
                else {
                    if(ul.style.borderTop == "") {
                        ul.style.borderTop = "2px solid white";
                    }                   
                    var li = document.createElement("li");
                    li.id = "li-"+id
                    var text = document.createTextNode(todoItem.value);
                    var checkbox = document.createElement("input");
                    checkbox.id = "checkbox-"+id;
                    checkbox.className = "checkboxes";
                    checkbox.type = "checkbox";
                    li.appendChild(text);
                    li.appendChild(checkbox);
                    ul.appendChild(li);
                    id++;
                }               
                //reset form
                document.getElementById("form").reset();
            }

            /* check item completed */
            function checkedItem(num) {

            }

        }       

    </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</body>
</html>


TodoList应用程序
/*变数*/
：根{
--正义字体：“正义”，草书；
}
身体{
/*背景色：#536691*/
背景图像：url（“http://pctechtips.org/apps/conf/img/Chicago-Wallpaper-3.jpg");
最小高度：100vh；
z指数：-10；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
颜色：白色；
字体大小：1.3rem；
}
.英雄{
位置：绝对位置；
最小高度：100vh；
最小宽度：100vw；
排名：0；
底部：0；
背景色：rgba（31,34,118,0.5）；
}
h1{
边缘顶部：12雷姆；
边缘底部：0px；
垫底：0px；
字体系列：var（--font）；
}
.铅{
字体大小：1.5rem；
字体系列：var（--font）；
}
人力资源{
边缘顶端：2rem；
边框：1px纯白；
显示：无；
}
保险商实验室{
/*边框顶部：2件纯白*/
边缘顶端：2rem；
列表样式：无；
/*显示：无*/
}
李{
边框底部：1px纯白；
填充：0.5雷姆0.5雷姆0；
保证金：0.1rem 0.1rem；
}
.复选框{
浮动：对；
线高：15px；
宽度：17px；
高度：17px；
背景色：#e9ecef；
边框：1px实心#e9ecef；
边界半径：3px；
}
任务列表
欢迎使用我的todoList应用程序
提交



window.onload=函数（）{
//变数
var submitBtn=document.getElementById（“btn”）；
var ul=document.getElementById（“列表”）；
var todoItem=document.getElementById（“输入”）；
var hr=document.getElementById（“hr”）；
var-id=1；
//按钮事件侦听器
submitBtn.addEventListener（“单击”，addTodoItem）；
//动态添加复选框事件侦听器
$（文档）。在（“单击”、“.checkbox”上，函数（）{
var-boxId=$（this.attr（“id”）；
var num=boxId.split（“-”[1]；
console.log（“复选框：+num”）；
//checkedItem（num）；
var checkedLi=document.getElementById（“li-”+num）；
选中edli.style.textEdition=“行通过”；
}); 
/*将待办事项添加到列表中*/
函数addTodoItem（）{
console.log（todoItem.value）；
如果（todoItem.value==“”）{
警报（“输入一些文本！”）；
}
否则{
如果（ul.style.borderTop==“”）{
ul.style.borderTop=“2px纯白”；
}                   
var li=document.createElement（“li”）；
li.id=“li-”+id
var text=document.createTextNode（todoItem.value）；
var checkbox=document.createElement（“输入”）；
checkbox.id=“checkbox-”+id；
checkbox.className=“checkbox”；
checkbox.type=“checkbox”；
李.附件（文本）；
li.appendChild（复选框）；
ul.儿童（li）；
id++；
}               
//重置表单
document.getElementById（“表单”）.reset（）；
}
/*检查项目是否已完成*/
函数checkedItem（num）{
}
}

由于jQuery是JavaScript，您不需要jQuery。当窗口加载时，监听列表上的单击，而不是复选框。在事件侦听器的回调函数中，检查复选框是否是目标，然后获取这个特定的

li

元素并应用css

//get list and listen for click on your list
const list = document.getElementById("list");
list.addEventListener("click", function(event) {
  const target = event.target;
  //ignore clicks on anything but checkbox
  if(target.type !== "checkbox") return;
  //apply css here
  target.parentNode.style.textDecoration = "line-through";
});

由于复选框是

li

的子元素，

li

是

ul

的子元素，因此单击事件将从

checkbox

元素冒泡到您的列表，使此解决方案成为可能

对话后在评论中编辑：很高兴我们能理解。

在使用诸如checkbox之类的交互式元素时，您不需要JavaScript来控制元素的样式

使用：

1）伪元素

2）

3）伪类，以及

4）

允许我们控制交互元素，如表单控件。复选框行为类似于操作：

检查并通过检查
和图标作为奖励
不涉及JavaScript

尽管CSS解决方案适合TODO列表，但它并不像JavaScript那样通用。将来，您将需要处理表单控件以外的元素的事件处理，因此我向demon添加了一个测试函数