jQuery에서 체크 박스 이벤트 및 버튼 바인딩하기

Question

Treehouse의 코스를 기반으로 DOM API를 사용하여 순수 JavaScript에서 기본 "할 일 목록"애플리케이션을 작성했습니다. 사용자는 순서가 지정되지 않은 목록에 작업을 추가하거나, 해당 작업의 이름을 편집하거나, 완료된 것으로 확인하거나 불완전한 것으로 선택을 취소하거나 모두 삭제할 수 있어야합니다.

순수한 JavaScript 버전이 정상적으로 작동합니다. 이 애플 리케이션을 다시 작성하는 데 사용하여 jQuery에 익숙해 지려고 노력하고 있지만 체크 박스와 다른 버튼을 각각의 기능에 바인딩하는 데 도움이 필요합니다.

자바 스크립트 버전 - http://codepen.io/Llanyewe7/pen/bedjXv

jQuery를 버전 - http://codepen.io/Llanyewe7/pen/MewBNL

지금까지 만하여 addTask() 기능이 적용 버튼이 정상적으로 작동하고 "추가"; 내 체크 박스는 "편집"및 "삭제"버튼과 함께 작동하지 않습니다. Chrome의 개발자 도구 및 자바 스크립트 콘솔은 코드 오류를 식별하지 않습니다. 내 문제를 해결하기 위해 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; 

}; 

새롭게 추가 된 행이 새 목록 항목에 이벤트를 바인딩합니다. 나는 그것을 테스트, 체크 박스 (체크 이벤트 만), 이벤트 편집 및 삭제 이벤트가 올바르게 해고되고있다. 체크 박스 선택 취소 이벤트에 문제가있는 것 같습니다. 그러나 당신이 거기에서 그것을 알아낼 수 있다고 생각합니다.

즐기십시오 :)