点击无序列表加号图标无控制台日志输出问题排查

你遇到的核心问题是jQuery直接绑定事件的方式只能作用于页面加载时已经存在的DOM元素——初始的两个.plus图标是页面加载时就有的，所以能正常响应点击；但通过表单新增的.plus是后续动态创建的，并没有被绑定上点击事件。另外还有个小细节：你新增列表项时没同步创建对应的描述段落，就算事件绑定好了，showDescription函数也找不到要操作的元素。

下面是具体的修复步骤：

1. 改用事件委托绑定点击事件 #

把原来直接绑定.plus的代码：

$(".plus").click(function() {
    console.log("description expanded")
    var plusId = $(this).attr("id"); //获取加号图标id
    showDescription(plusId);
    return false;
});

替换成事件委托的写法，委托给页面加载时就存在的父元素（比如#list这个无序列表）：

$('#list').on('click', '.plus', function() {
    console.log("description expanded")
    var plusId = $(this).attr("id");
    showDescription(plusId);
    return false;
});

事件委托利用了DOM事件冒泡的特性：父元素监听事件，再判断触发事件的子元素是否符合目标选择器，这样不管子元素是一开始就存在的，还是后来动态生成的，都能正常触发事件。

2. 新增列表项时同步创建描述段落 #

在addToList函数里，你只创建了列表项<li>，但没生成对应的描述段落<p class="item-desc">，导致点击加号时找不到要显示/隐藏的元素。修改这部分代码，在追加<li>后同步添加描述段落：

// 新增li到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);
// 新增：添加对应的描述段落
var descP = document.createElement("p");
$(descP).attr("id", "desc-" + numId);
$(descP).addClass("item-desc bg-white");
$(descP).text(todoDesc);
$(descP).hide(); // 默认保持隐藏
ul.appendChild(descP);

3. 修复showDescription里的图标类名操作错误 #

你之前在showDescription里错误地操作了描述段落的图标类名，但描述段落是<p>标签，不是FontAwesome图标。应该修改触发点击的.plus图标本身的类名，调整后的函数如下：

function showDescription(plusId) {
    //从id中提取数字
    var num = plusId.substring(plusId.indexOf("-")+1);
    var $desc = $("#desc-"+num);
    var $plusIcon = $("#"+plusId); // 获取当前点击的加号图标
    //检查描述段落的显示/隐藏状态
    if($desc.is(":hidden")) {
        $desc.show("slow");
        $plusIcon.removeClass("fa-plus-square-o");
        $plusIcon.addClass("fa-minus-square-o");
    } else {
        $desc.hide("slow");
        $plusIcon.removeClass("fa-minus-square-o");
        $plusIcon.addClass("fa-plus-square-o");
    }
}

做完以上修改后，新增的列表项的加号点击就能正常触发事件，展开/收起对应的描述内容了。

内容的提问来源于stack exchange，提问作者miatech