将关闭按钮添加到附加在.click上的DIV

Question

我一直在为交互式地图开发一些jQuery代码.我已经在这里得到了一位名叫"Kevin Gurney"的用户的精彩帮助,非常感谢他.我现在有另一个小问题,并想知道是否有人可以提供建议.

基本上,当用户点击地图上的某个点时,DIV会附加该地图点的完整描述.我想在此DIV的右上角添加一个结束的"X"图标,以便用户可以关闭它,但是看起来第一次单击事件会阻止我的第二次单击事件工作.

以下是一些代码示例:

$(".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();
    });
});

更新小提琴.