jquery - using event.stopPropagation()

Question

문서가 준비되면 서버에서 게시물 요청을 통해 일부 데이터를 가져오고 태그로 HTML 태그를 채 웁니다. 해당 태그를 클릭하면 주석 텍스트 영역이 표시됩니다. document 섹션을 클릭하면 텍스트 영역은으로 마감됩니다. 여기서 문제는 textarea에 텍스트를 입력 할 수 없다는 것입니다. 내부를 클릭하면 숨어 있습니다. event.stopPropagation()을 사용해 보았지만 사용하지 않았습니다.

가 여기 내 jQuery 코드입니다 :

$.post("/person/keywords/get/", function(data){ 
    for(i=0; i<data.length; i++) 
    { 
     count = count + 1; 
     $(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>'); 
    } 
}); 

$(".keywords-set").on('click', "[id^=keyword]", function(event) { 
    event.preventDefault(); 
    i = $(this).attr("id"); 
    i = i.split('-').pop(); 
    $("#comment-"+i).show(); 
    return false; 
}); 

$(".comment").click(function(event) { 
    event.stopPropagation();      
}); 

$(document).click(function() { 
    $(".comment").hide(); 
}); 

완전한 HTML과 자바 스크립트 코드 보려면 여기를 확인하십시오 : 그것은 내 로컬 호스트에 jsfiddle 아니라에서 일하고 https://gist.github.com/3024186

. 이유를 말해 줄 수 있겠습니까, 이유가 무엇입니까?

감사합니다. 나는 또한이

$(".keywords_set").on('click', ".comment", function(event) { 
    event.stopPropagation(); 
}); 

event.stopPropagation() 시도했습니다

UPDATE 아약스를 통해 업데이트 된 HTML 요소에 대해 작동하지 않습니다. 그러나 정상적인 (이미 주어진) 요소를 위해 일하고있다.

$(".keywords_set").on('click', ".comment", function(event) { 

당신은 당신이 ".keywords_set"요소에 이벤트를 잡기 있다는 것을 이해해야합니다, 그것은

".comment"를 통해 버블 경우 거기 당신은 체크됩니다

Answer 1

이 작업을 수행 할 때

".keywords_set"과 ".comment"사이에 설정된 다른 "클릭"이벤트도 활성화됨을 의미합니다.

중지 전파를 수행하거나 false를 반환하면 문서에 ".keywords_set"의 버블 링에만 영향을줍니다.

이 작업을 수행 할 수 있습니다

$(document).click(function() { 
    if($(".comment:hover").length==0){ 
     $(".comment").hide(); 
    } 
}); 

편집 :에 대한 회신 : "이봐, 그 코드가 작동, 난 당신이에 대한 자세한 설명이 될 수 .comment.length을 언급함으로써 그 일을하는 방법을 모른다 그?"

jquery 선택기를 수행하면 배열이 반환됩니다. 당신이 $(".comment:hover")을 수행 할 때이 클래스 ".comment"와 $(".comment") 모든 HTML 노드를한다면 그래서 목록에 귀하에게 반송됩니다 [으로 obj1, obj2보다, ..., objn]

당신이 jQuery를 요구하는 것은 당신에게 어떤을 선택합니다 요소를 "comment"클래스와 함께 사용합니다.이 클래스에는 현재 마우스가 있습니다. 의미는 $(".comment:hover")에 의해 반환 된 목록의 길이가 0보다 큰 경우 ".comment"의 클릭에서 버블을 발견 한 것입니다.

false를 반환하거나 전파를 중지해도 작동해야합니다.

편집 2 (왜 귀하의 경우는 작동하지 않습니다, 나는 전체 코드를 많이 보지 않았지만 몰라) :

내가 전체 코드를 읽을 게으른했다. 그러나 당신이 코멘트에 대한 click 이벤트를 설정할 때, 그 코멘트는 아직 존재하지 않습니다. 추가중인 새 주석은 클릭 핸들러에 의해 포착되지 않습니다. 아약스 콜백 내부를 추가하고 작동합니다 :)

편집 3 : 한 가지 더 : 당신이 부작용을받지 못하고있다

를 클릭 심지어 당신이 다시 정의하고 있기 때문에에만 정지 전파를 가지고 있지만, 당신 때문에 연습에

$(".keywords_set").on('click', ".comment", function(event) { 

당신이 N 시간이 포스트 방법 때문에 처리 할 여러 번

Answer 2

을 추가하는 클릭 이벤트를 proccessing됩니다 모두 다른 의견을 false를 반환하기 전에 정지 전파를 추가해야 아씬이다. 만성적 인. $ (". comment")가 존재하기 전에 바인딩하고 있습니다.

$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>'); 

후

$(".comment").click(function(event) { 
     event.stopPropagation();      
     }); 

이동하는 작동합니다.