jQueryでのチェックボックスのイベントとボタンのバインド

Question

Treehouseのコースに基づいて、DOM APIを使用して純粋なJavaScriptで基本的な "to-doリスト"アプリケーションを作成しました。ユーザーは、順序付けられていないリストにタスクを追加したり、そのタスクの名前を編集したり、完了したものとしてチェックしたり、不完全なものとしてチェックを外したりすることができます。

純粋なJavaScriptバージョンは、必要に応じて動作します。私はこのアプリを書き直すためにjQueryをもっと使いこなすよう努めていますが、チェックボックスや他のボタンをそれぞれの機能にバインドするためのヘルプを探しています。

JavaScriptのバージョン - http://codepen.io/Llanyewe7/pen/bedjXv

jQueryのバージョン - それが必要としてhttp://codepen.io/Llanyewe7/pen/MewBNL

はこれまでのところ、addTask()機能によって管理のみ "追加" ボタンが機能しています。私のチェックボックスは、「編集」ボタンと「削除」ボタンと共に動作していないようです。 ChromeのデベロッパーツールとJavaScriptコンソールはコードエラーを特定しません。私の問題を解決するためにjQueryの "バックエンド"関数にイベントを効果的にバインドするにはどうしたらよいですか？

Answer 1

チェックボックスをバインドするコードは表示されません。リスト内の新しい追加項目のイベントを編集および削除してください。

var createNewTaskItem = function() { 

    var newTask = $taskInput.val(); 

    var $listItem = $("<li></li>"); 
    var $checkBox = $("<input></input>").attr("type", "checkbox"); 
    var $label = $("<label></label>").text(newTask); 
    var $editInput = $("<input></input>").attr("type", "text"); 
    var $editButton = $("<button></button>").text("Edit").addClass("edit"); 
    var $deleteButton = $("<button></button>").text("Delete").addClass("delete"); 


    var $newTaskItem = $listItem.append($checkBox).append($label).append($editInput).append($editButton).append($deleteButton); 

    //BIND THE EVENTS TO THE NEW TASK ITEM HERE 
    bindTaskEvents($newTaskItem, taskCompleted); 

    return $newTaskItem; 

}; 

新しい追加行は、イベントを新しいリストアイテムにバインドすることを確認してください。私はそれをテストし、チェックボックス（チェックされたイベントのみ）、イベントの編集とイベントの削除が正しく開始されています。チェックボックスのチェックを外すと問題が発生しているようです。しかし、私はあなたがそこからそれを理解することができると思います。

お楽しみください:)