jQuery에서 자식으로 전달이 중지됩니다.

Question

여기에 명백한 내용이 표시되지 않습니까? 나는 비슷한 문제에 대한 수십 가지 해결책을 보았지만 나와 함께 간신히 그들은 일하지 않았다.

$(document).ready(function() {   
    $(".init-tutorial").on("click", function(e){ 
    var template = $(".pointer.template"); 
    var posX = e.pageX - $(this).position().left - 8, 
     posY = e.pageY - $(this).position().top - 8;  

    template 
     .clone() 
     .removeClass("template") 
     .css({"top":posY,"left":posX}).attr("tabindex",-1) 
     .appendTo($(this)).focus(); 
    }); 
    $(document).on("click", ".comments", function(e){ 
    e.stopPropagation(); 
    }); 
}); 

.template (.comments 포함)는 모든 클릭을 상위 엘로 전파하므로 바람직하지 않습니다.

내가 막을 수 있었던 방법은 if (e.target === this)를 사용하고 있었다. 그러나 이것은 이벤트를 수신해야하는 여러 요소를 가지고 있기 때문에 나에게 또 다른 문제를 일으킨다.

템플릿 마크 업 : 컨테이너 사업부에 대한

<div class="pointer template" style=""> 
    <div class="comments"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
     <textarea class="form-control" rows="3" placeholder="კომენტარი"></textarea> 
     <button type="button" class="btn btn-success btn-block">დაპოსტე</button> 
     </div> 
    </div> 
    </div> 
</div> 

, 그것은 특별한 아무것도 없다

<div class="init-tutorial" style="height:400px;width:400px;background-color:red;"></div> 

jsfidle : http://jsfiddle.net/9cjrp079/

Answer 1

이 코드가 트리거 IMO

$(document).on("click", ".comments", function(e){ 
    e.stopPropagation(); 
}); 

는, 이벤트가있다 이미 $(document)에 전파되었습니다. $(".comments")에는 onclick 리스너를 직접 연결해야하지만 $(document)은 연결할 필요가 없을 수 있습니다.

예.

$(".comments").on("click", function(e){ 
    e.stopPropagation(); 
}); 

--- 편집 ---

각 추가 요소에 대한 .click을 설정

template 
    .clone() 
    .removeClass("template") 
    .css({"top":posY,"left":posX}).attr("tabindex",-1) 
    .appendTo($(this)) 
    .focus() 
    .click(function(e){ 
    e.stopPropagation(); 
    }); 

jsfiddle : http://jsfiddle.net/9cjrp079/1/