Adding a close button to a DIV that was appended on .click

I have been working on some jQuery code for an interactive map. I've already gotten some fantastic help from a user named "Kevin Gurney" on here, so big thanks to him. I'm now having another little issue, and was wondering if someone could advise.

Basically, when a user clicks on a point on my map, a DIV is appended with a full description of that map point. I want to add a closing "X" icon in the top right of this DIV, so that the user can close i开发者_开发技巧t, however it seems that the first click event is stopping my second click event from working.

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

Click on one of the squares, the hover event is seperate. then click on the X at the top right side and nothing happens!

I think you are looking for event.stopPropagation();

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

updated fiddle.

I was able to resolve this by changing one of your functions slightly.

Have a look: http://jsfiddle.net/qw2v5/3/