用户生成的元素上的 ToggleClass() 不起作用

Question

我正在制定待办事项清单。我想切换代表待办事项的 HTML 列表元素的 class。列表元素在页面加载后由用户生成。我现在拥有的 ToggleClass 功能不起作用。我能够在控制台中捕获 dblclick 事件，但 class 不会切换。

JavaScript/Jquery 看起来像这样：

$(document).ready(function () {
    $(document).on("dblclick", ["li"], setStatus); 
    console.log("Call setStatus");
});

和 setStatus 函数：

setStatus = function (){ 
    console.log("Double clicked on the li");
    $(this).toggleClass("done");
};

HTML

 <body>
        <div id ="todoList">
            <ul></ul>
        </div>
        <input type ="text" id ="todoText"/>
        <button id ="addTodoButton">Add!</button>
    </body>

CSS-class

.done{
    color: #006600;
}

Answer 1

$(document).ready(function () {
    $(document).on("dblclick", "li", setStatus); 
    console.log("Call setStatus");
});

从 ["li"] 中删除 []，它不是有效的选择器，您的代码触发了回调，因此在控制台中显示了消息。

用户生成的元素上的 ToggleClass() 不起作用

ToggleClass() on user generated element doesn't work

javascript

jquery

toggleclass