0

Thibaut Corouble によるこのtodo リストに機能を追加しようとしていますが、これまでのところ、「+」記号を押すまではすべて簡単に思えます。簡単なプロンプトを表示してテキストを取得し、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 に答える