2011-02-23 16 views
2

대화식지도 용 jQuery 코드를 작성했습니다. 나는 "Kevin Gurney"라는 사용자의 환상적인 도움을 이미 받았으므로 그에게 커다란 감사를 전한다. 나는 이제 또 다른 작은 문제를 겪고 있으며 누군가가 조언 할 수 있는지 궁금해하고있었습니다..click에 추가 된 DIV에 닫기 버튼 추가

기본적으로 사용자가 내지도에서 한 지점을 클릭하면 해당지도 지점에 대한 전체 설명이 DIV에 추가됩니다. 이 DIV 오른쪽 상단에 닫는 "X"아이콘을 추가하여 사용자가 닫을 수 있도록하고 싶지만 첫 번째 클릭 이벤트가 두 번째 클릭 이벤트가 작동하지 않는 것으로 보입니다. 여기

some sample of the code입니다 : 제곱의 하나에

$(".point").live("mouseenter", function() { 
    //code to show description 
    $(this).append('<div class="mapitem-smalldescription">Small description</div>'); 
}); 

$(".point").live("mouseleave", function() { 
    //code to show description 
    $(".mapitem-smalldescription").fadeOut("normal", function() { 
     $(this).remove(); 
    }); 
}); 
$(".point").live("click", function() { 
    //code to full description 
    $(this).append('<div class="mapitem-fulldescription"><div class="close">x</div>Full description</div>'); 

}); 

$(".close").live("click", function() { 
    //code to close description, dosent work 
    $(".mapitem-fulldescription").fadeOut("normal", function() { 
     $(this).remove(); 
    }); 
}); 

클릭, 호버 이벤트는 별도입니다. 오른쪽 상단의 X를 클릭하면 아무 일도 일어나지 않습니다!

답변

5

난 당신이 fiddle 업데이트 event.stopPropagation();

$(".close").live("click", function(event) { 
    //code to close description, dosent work 
    event.stopPropagation(); 
    $(".mapitem-fulldescription").fadeOut("normal", function() { 
     $(this).remove(); 
    }); 
}); 

찾고있는 생각 :

은 보라.

+0

@Stephen : 귀하의 바이올린은 당신이 언급 한 게시물보다 낫습니다. +1 – Dutchie432

1

기능 중 하나를 약간 변경하여 해결할 수있었습니다. http://jsfiddle.net/qw2v5/3/

+0

왜 부정 투표입니까? – Dutchie432

+0

나는 당신을 부정 투표하지 않았다. 이 코드는 제대로 작동하는 것 같습니다. 감사합니다 :) –