添加一個關閉按鈕添加到.click

Question

上的DIV我一直在研究一些交互式地圖的jQuery代碼。我已經在這裏得到了一位名叫「Kevin Gurney」的用戶的精彩幫助，非常感謝他。我現在有另一個小問題，並想知道是否有人可以建議。

基本上，當用戶點擊我地圖上的一個點時，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，沒有任何反應！

Answer 1

我認爲你正在尋找event.stopPropagation();

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

更新fiddle。

Answer 2

我能夠通過稍微改變你的一個函數來解決這個問題。

看一看：http://jsfiddle.net/qw2v5/3/