jquery - 向 append 在 .click 上的 DIV 添加关闭按钮

Question

我一直在为交互式 map 编写一些 jQuery 代码。我已经从这里一位名叫“Kevin Gurney”的用户那里得到了一些非常棒的帮助，非常感谢他。我现在遇到了另一个小问题，想知道是否有人可以提供建议。

基本上，当用户单击 map 上的某个点时，会 append 一个 DIV，其中包含该 map 点的完整描述。我想在此 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();
    });
});

单击其中一个方 block ，悬停事件是单独的。然后点击右上角的 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 .