使用jQuery UI制作待办列表时.ui-icon-close点击无效，如何修复？

问题分析与修复方案： #

• DOM标签未闭合导致结构异常
  你动态创建li的代码里，<span class='ui-icon ui-icon-close'></li>的span标签未闭合，破坏了DOM结构，直接导致点击事件无法正常触发。需要补全</span>标签。

• 事件委托容器不匹配
  你将点击事件绑定在#project上，但动态生成的li是添加到#main中的，若#project不是#main的父容器，事件无法冒泡到绑定元素。应把事件委托容器改为#main。

• 选择器冗余且存在语法错误
  通过index跨元素查找的方式不仅冗余，还因$("#main li :eq(" + index + ") a")里的空格，错误选择li的子元素而非li本身。直接从当前点击元素的上下文获取对应DOM更可靠且不易出错。

修正后的代码： #

// 修正事件委托容器与元素获取逻辑
$("#main").on("click", "span.ui-icon-close", function () {
    var $targetLi = $(this).closest("li");
    var targetId = $targetLi.find("a").attr("href");
    $targetLi.remove();
    $(targetId).remove();
});

// 修正动态创建li的标签闭合问题
$("<li><a href='#" + replaceName + "'>" + projectName + "</a><span class='ui-icon ui-icon-close'></span></li>").appendTo("#main");

额外检查项： #

• 确认jQuery与jQuery UI的CDN链接已正确引入，且加载顺序为先加载jQuery，再加载jQuery UI。
• 通过浏览器开发者工具检查.ui-icon-close元素：确认图标样式正常显示，且元素存在可点击的区域（无其他元素遮挡）。

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