Question

我正在尝试通过Thibaut Courouble在此todo list上添加功能，到目前为止，在我按下“+”符号之前，这一切似乎都很简单。我已经询问了一个简单的提示并获得了文本，并使用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/

Answer 1

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

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

演示：Fiddle

jQuery在类中附加新的li元素？

1 个答案: