e.stopPropagation () и .slideToggle () во время войны внутри событий клика - PullRequest
Новая
       23

e.stopPropagation () и .slideToggle () во время войны внутри событий клика

0 голосов
/ 16 декабря 2011

У меня есть дочерняя кнопка close внутри родителя, окно уведомлений.При щелчке по родительскому элементу окно уведомления расширяется, и в нем появляется описание уведомления, а внутри него становится видимой дочерняя кнопка.

При нажатии этой кнопки необходимо развернуть уведомление и скрыть и себя, и описание.

Поскольку у кнопки есть событие click внутри родительского события click, оба были вызваны.Я переключился на event.stopPropagation(), чтобы родительское уведомление перестало расширяться после щелчка.Несмотря на то, что это не позволило развернуть уведомление при нажатии кнопки закрытия, возникла новая проблема, которую я не понимаю.

В моем тесте у меня настроено два уведомления, оба нерасширенные.Когда я нажимаю на уведомление, оно раскрывается и показывает описание и кнопку закрытия.Когда я нажимаю кнопку закрытия, уведомление раскрывается, а кнопка и описание скрываются. Но я обнаружил, что описание и кнопка закрытия появляются для другого уведомления!

Код: 

    var $NotificationContainer = $("#NotificationContainer");
    $NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');

    var $thisNotification = $NotificationContainer.children('.Notification[title='+title+']');
    $thisNotification.append('<div class="NotificationTitle">'+title+'</div>');
    $thisNotification.append('<div class="NotificationDescription">'+description+'</div>');
    $(".NotificationDescription").hide();

    // Button used to close an expanded notification
    $thisNotification.append("<div class='NotificationCloseButton'></div>");
    $('.NotificationCloseButton').hide();

    // When the parent notification box is clicked
    $thisNotification.click(function(event)
    {
        $thisNotification.animate({height:250}, 1000);
        $thisNotification.find('.NotificationDescription').slideToggle('fast');
        $thisNotification.find('.NotificationCloseButton').slideToggle('fast');
    });

    // When the child close button is clicked
    $(".NotificationCloseButton").click(function(event)
    {
        event.stopPropagation();
        $thisNotification.animate({height:50}, 1000);
        $thisNotification.find('.NotificationDescription').slideToggle('fast');
        $thisNotification.find('.NotificationCloseButton').slideToggle('fast');
    });

Я не знаю, как это $thisNotification.find('element')не ловит нужное уведомление.

1 Ответ

1 голос
/ 16 декабря 2011

Работает ли это, если вы измените обработку события на 

// When the parent notification box is clicked
    $thisNotification.click(function(event)
    {
        var self = $(this);
        self.animate({height:250}, 1000);
        self.find('.NotificationDescription').slideToggle('fast');
        self.find('.NotificationCloseButton').slideToggle('fast');
    });

    // When the child close button is clicked
    $(".NotificationCloseButton").click(function(event)
    {
        var self = $(this);
        event.stopPropagation();
        self.animate({height:50}, 1000);
        self.find('.NotificationDescription').slideToggle('fast');
        self.find('.NotificationCloseButton').slideToggle('fast');
    });

, использовав this для идентификации элемента clicked вместо того, чтобы полагаться на переменную, которая была определена при создании элемента ( избегает случаев в циклах, когда все элементы ссылаются на последнее значение, назначенное переменной .. )

Кроме того, поскольку вы добавляете к #NotificationContainer, вы можете просто выбрать последнееэлемент вместо поиска идентичных названий .. 

var $thisNotification = $NotificationContainer.children().last();

полностью удалил селектор, так как вы только что добавили последний элемент ..

...