Добавление кнопки закрытия в DIV, который был добавлен на .click

Question

Я работал над кодом jQuery для интерактивной карты. Я уже получил некоторую фантастическую помощь от пользователя по имени "Кевин Герни", большое ему спасибо. У меня теперь есть еще одна маленькая проблема, и мне было интересно, если кто-то мог бы посоветовать.

Обычно, когда пользователь нажимает на точку на моей карте, к DIV добавляется полное описание этой точки на карте. Я хочу добавить закрывающий значок «X» в правом верхнем углу этого DIV, чтобы пользователь мог закрыть его, однако кажется, что событие первого щелчка останавливает мое событие второго щелчка.

Вот пример кода :

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

обновлено скрипка .

Answer 2

Мне удалось решить эту проблему, слегка изменив одну из ваших функций.

Посмотрите: http://jsfiddle.net/qw2v5/3/