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

已更新fiddle。

Answer 2

我可以通过稍微更改一个功能来解决这个问题。

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

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

2 个答案: