todolistにあらかじめ項目を追加したい。

Question

monacaでtodolistを作成しています。
参考にしているサイトから、以下のようにコードを記述しました
。
参考にしたサイト：https://github.com/themaxsandelin/todo
記述したコード：https://codepen.io/rivesal/pen/qPwXBq?editors=1000

①実現したいこと。
あらかじめ、項目を追加したい。
以下のページのように、あらかじめチェック項目を追加しておきたいのです。
https://codepen.io/hilotacker/pen/ONwpVy

②発生している問題
作成することはできましたが、チェックと、ゴミ箱をそれぞれ押しても反応がありません。この場合、コードの記述が間違っているのか、別にコードの記述が必要なのでしょうか。

③追加したコード```

<ul class="todo" id="todo">
  <li>test3<div class="buttons"><button class="remove"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><rect class="noFill" width="22" height="22"></rect><g><g><path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"></path></g><g><g><path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"></path></g><g><path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"></path></g><g><path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"></path></g></g></g></svg></button><button class="complete"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><rect y="0" class="noFill" width="22" height="22"></rect><g><path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"></path></g></svg></button></div></li>    
</ul>

コード

Comments

[yumetodo]

コードはインデントしてハイライトしてください・・・

Answer 1

お答えするために色々見たのですが、ストレートな回答は難しくて
ただ少なくても参考にしたサイトがあまり良いとは思えないので
もっとシンプルに作成することをオススメしたいです。

立ち戻るとMonacaでTODOリストということですので
Monacaに用意されているシンブルなTODOリストサンプルアプリを使ってみてはいかがでしょうか。
それではダメなのでしょうか。

Monacaで「新規プロジェクトの作成」→「サンプルアプリ」→「jQuery TODO App」です。
とてもシンプルなので分かりやすいですし、読みやすくとっかかりやすさもあると思います。
一度確認してみてください。