个人中心
gpt4 book ai didi

javascript - 在无序列表中单击加号图标时没有控制台日志输出

转载 作者：行者123 更新时间：2023-11-28 02:16:05 33 4
gpt4 key购买 nike

我有一个 ul(无序列表)，其中包含几个 li(列表项)，当我单击 li 左边的 + 号时，控制台日志应该输出“description expanded” 对于前两个 li，它工作得很好，但是不适合任何其他李氏。默认情况下，html 代码仅包含 2 里。之后的任何 li 都是通过表格添加的。但是，任何新的 li 都不会产生控制台日志输出。这意味着他们不响应点击。我正在使用 jQuery 来监听点击事件。单击图标时。元素链接http://pctechtips.org/apps/todo/ 

//variables
//todoList array to hold (title, description) for every todo tiem
var todoList = []; //{title: "value", desc: "value"},
var numId = 2; //num is for desc paragraph id eg <p id="plus-3">

/*
 * Script main body
 */
 $(document).ready(function() { 
    //hide form when doc loads first time
    $("#submit-form").hide();
    //hide list item description <p>
    $(".item-desc").hide();

    //listener for show hide form functionality
     $("#add-todo").click(function() {
        toggleForm();
        return false; //return false to prevent page reload
     });

     //listener for add new item form (submit button)
     $(".btn").click(function() {
        console.log("submit item");
        addToList();
     });

     //listener for expanding li description
     $(".plus").click(function() {
        console.log("description expanded")
        var plusId = $(this).attr("id"); //grabbing id of plus sign
        showDescription(plusId);
        return false;
     });
 });

 //functionality for show / hide form
 function toggleForm() {
    if($("#submit-form").is(":hidden")) {
        console.log("form exapnded");
        $("#submit-form").show("slow");
        $("#form-icon").removeClass("fa-plus-square-o");
        $("#form-icon").addClass("fa-minus-square-o");
    }
    else {
        console.log("form hidden");
        $("#submit-form").hide("slow");
        $("#form-icon").removeClass("fa-minus-square-o");
        $("#form-icon").addClass("fa-plus-square-o");
    }   
 } 

 //add new item to todo list items
 function addToList() {
    numId++;
    //getting data from input fields
    var todoTitle = $("#todo-title").val();
    var todoDesc  = $("#todo-desc").val();
    //checking user input
    if(todoTitle == "" || todoDesc == "") {
        alert("fill in all fields!");
    }
    else {
        console.log(todoTitle + "\n" + todoDesc);
        //adding values to array
        todoList.push({title: todoTitle, desc: todoDesc},);
        //adding new li to ul   
        var ul = document.getElementById("list");
        var li = document.createElement("li");
        $(li).addClass("list-group-item justify-content-between align-items-center");
        $(li).append(($('<i id="plus-'+numId+'" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>')));
        $(li).append(($('<span class="left marg-left">'+todoTitle+'</span>')));
        $(li).append(($('<i class="fa fa-trash-o right" aria-hidden="true"></i>')));
        $(li).append(($('<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>')));
        ul.appendChild(li); 
    }   
 }

 //expanding description under for each todo
 function showDescription(plusId) {
    //getting the number from id
    var num = plusId.substring(plusId.indexOf("-")+1); 
    //checking for hide / show description paragraph
    if($("#desc-"+num).is(":hidden")) {
        $("#desc-"+num).show("slow");
        $("#desc-"+num).removeClass("fa-plus-square-o");
        $("#desc-"+num).addClass("fa-minus-square-o");
    }
    else {
        $("#desc-"+num).hide("slow");
        $("#desc-"+num).removeClass("fa-minus-square-o");
        $("#desc-"+num).addClass("fa-plus-square-o");
    }
 }

index.html

<!DOCTYPE html>
<html>
<head>
    <title>TodoList App</title>
    <!-- bootstrap, fontawsome cdn -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- local stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- jquery cdn -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- local javascript -->
    <script type="text/javascript" src="js/todo.js"></script>

</head>
<body>
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
          <a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
        </nav>
    <!-- /navbar -->
    <!-- todoList -->
    <div class="container">
        <div class="add-item text-white text-center col-sm-12 col-md-10 col-lg-8 mb-4">
        <a id="add-todo" class="new-todo text-white text-center" href=""><i id="form-icon" class="fa fa-plus-square-o" aria-hidden="true"></i> Enter new todo item</a>
        <div id="submit-form" class="form-hide text-center col-sm-12 col-md-12 col-lg-8">
            <form class="">
              <div class="form-group">
                <input type="text" class="form-control" id="todo-title" placeholder="Todo Title" value="Pay Car Insurance">        
              </div>
              <div class="form-group">
                <input type="text" class="form-control" id="todo-desc" placeholder="Todo Description" value="This is to pay car insurance">
              </div>
              <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>               
            </form>                 
        </div>
        <!-- horizontal line -->
            <hr>
        <!-- list items -->
        <h1 class="heading-4">Todo List Items</h1>
        <ul id="list" class="list-group mt-4 pb-4">
          <li class="list-group-item  justify-content-between align-items-center">
           <i id="plus-1" class="plus fa fa-plus-square-o left" aria-hidden="true"></i> 
           <span class="left marg-left">Pay Car Insurance </span>         
           <i class="fa fa-trash-o right" aria-hidden="true"></i>
           <i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>
         </li>
         <p id="desc-1" class="item-desc bg-white">Helloooooooooo this is description</p>
          <li class="list-group-item  justify-content-between align-items-center">
           <i id="plus-2" class="plus fa fa-plus-square-o left" aria-hidden="true"></i> 
           <span class="left marg-left">Pay Car Insurance </span><i class="fa fa-trash-o right" aria-hidden="true"></i>
           <i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>           
         </li>
         <p id="desc-2" class="item-desc bg-white">Helloooooooooo this is description</p>
        </ul>
    </div>  
    </div>
</body>
</html>

最佳答案

好的，对于动态添加的元素，偶数监听器需要在根/文档级别定义。所以

$("class").on("click", function() { });

将不起作用。必须是

$(document).on("click", ".class", function() { });

感谢上面的“MADDY BLACKLISTED”为我指明了正确的方向

关于javascript - 在无序列表中单击加号图标时没有控制台日志输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48471176/

33 4 0
文章推荐： c++ - 从 Canny 检测和标记端点
文章推荐： javascript - 使用javascript滚动图片
文章推荐： javascript - 如何使用 Html5 地理定位链接到 google map 打印方向？
文章推荐： javascript - 如何在弹出窗口中使用不同的文本对齐方式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com