0

我正在尝试将功能添加到Thibaut Courouble 的待办事项列表中，到目前为止，在我按下“+”符号之前，一切似乎都很容易。我已经询问了一个简单的提示并获取了文本并使用 jQuery append() 将新元素添加到列表中。但是，当我单击复选框时，它会忽略 jQuery 的 .click 以该元素为目标。

到目前为止，我目前正在使用 jQuery 的 on() 方法，但这似乎不起作用。

基本上，JavaScript 要求输入文本，然后在主 ul 中附加一个新的 li。

HTML

<ul class="todo-list">
 <li class="done"><a href="#" class="toggle">Toggle</a> Find an idea.</li>
 <li><a href="#" class="toggle">Toggle</a> Build it!</li>
 <li><a href="#" class="toggle">Toggle</a> Ship it...<br>with a line break!</li>
</ul>

Javascript

$(".icon-delete").click(function() {
  if ($(".todo-list > li").hasClass("done")) {
    $("li.done").remove();
  }
});

$(".toggle").click(function() {
  $(this).parent().toggleClass("done");
});

$(".icon-add").on("click", function() {
  var text = window.prompt("Enter text");
  $(".todo-list").append('<li><a href=\"#\" class=\"toggle\">Toggle</a> '+text+'</li>');
});

http://jsfiddle.net/mmTRS/

4

1 回答 1

0

由于toggle元素是动态添加的，因此您需要添加委托事件注册模型，例如

$(document).on('click',".toggle",function() {
    $(this).parent().toggleClass("done");
});

演示：小提琴

于 2013-06-01T02:32:11.747 回答