Ajax 콜백 후 클릭이 감지되지 않음

Question

현재 상당히 간단한 테스트를 진행 중입니다. 내 프로젝트에서는 양식을 통해 목록 항목을 추가하고 업데이트 된 목록에서 즉시 삭제할 수 있습니다.

$(".delete").bind("click", this.deleteListitem); 

I 클래스와 모든 요소가 "삭제"고 생각하기 전에 또는 Ajax 호출 후 제거 할 수 있습니다 : 파일의 시작 부분에서 나는 삭제를 클릭 처리기를 바인딩합니다. 그래서 "delete"클래스를 가진 새로운 listitem을 추가 할 때 나는 그것을 클릭하려고 시도하지만 그것은 함수에 들어 가지 않습니다. 이전 항목은 않습니다.

삭제 기능 :

PanelRoadtrip.prototype.deleteListitem = function(e) 
{ 
    console.log("click"); 
    e.preventDefault(); 

    this.listId = $(event.currentTarget).parent().parent().attr("id"); 
    this.listItemValue = $(event.currentTarget).parent().text().split(" delete")[0]; 
    $.ajax({ 
     type: "delete", 
     url: Util.api + "/roadtrip/delete/" + this.tripId + "/" + this.listId + "/" + this.listItemValue, 
     dataType: "json" 
    }); 
    //item verwijderen 
    $(event.currentTarget).parent().remove(); 
}; 

누군가가이 문제에 대한 간단한 솔루션을 하는가는 유래에서 검색,하지만 작동 아무것도 찾을 수 없습니다. 사전에

감사

Answer 1

는 대신 bind() 변경 on()를 사용해야합니다 :

$(".delete").bind("click", this.deleteListitem); 

document로드에서 DOM에 .delete의 부모 요소가

$(document).on("click",".delete", this.deleteListitem); 

(

에

Docs for on() are here. 위임 이벤트 섹션을 참조하십시오 :

위임 된 사건은 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수있는 장점이 있습니다. 요소가 거기 없기 때문에 위임 된 이벤트 처리기가 연결되는 시점에 존재하는 것으로 보장된다 요소를 선택하여, 자주 이벤트 핸들러

Answer 2

당신은

$(document).on("click", ".delete" this.deleteListitem); 
//Instead of document use a parent container that exists in DOM at any give time. 

사용

.on()

http://api.jquery.com/on/

대신

$(".delete").bind("click", this.deleteListitem); 

사용하여 동적 만든 콘텐츠 위임 된 이벤트 핸들러를 사용할 수 있습니다

새로 추가 된 클래스 .delete의 요소에는 기본적으로 이벤트 바인딩이 없으므로이 방법은 이벤트를 문서 또는 상위 컨테이너에 첨부하고 나중에 .delete 클래스의 요소에 대한 이벤트를 위임하거나 DOM에 나중에 추가하는 것입니다 .

Answer 3

을 연결하고 제거 할 필요성을 피하기 위해 위임 된 이벤트를 사용할 수 있습니다 DOM 준비, 너와 함께 바인딩해야 .on()

$(document).on("click", ".delete", this.deleteListitem);