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

Question

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

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

Поскольку кнопка имеет событие щелчка внутри родительского события 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') не поймать правильное уведомление.

Answer 1

ли работа, если изменить обработку для

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

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