Почему не срабатывает кнопка закрыть окно?

Question

[alex88a]

Есть всплывающая форма реализована через js, часто кода

if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
				
				$('.success').fadeIn('slow');
				
				$('#cart-total').html(json['total']);
				
				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}

код закрытия такой

$(function(){
 $('.close').click(function(){
    $(".success").hide(200);// время закрытия 0,2 секунды. Можно изменить    
 });

Пробовал уже разными способами, никак не хочет срабатывать. В чем может быть причина?
Заранее спасибо.

Answer 1

[Владимир Проскурин]

Ну так close добавляется только при открытии формы, а слушаете клик вы только для элементов close, которые уже есть на странице. Используйте вот такую конструкцию, так будут слушаться все close внутри #notification, которые были даже добавлены позже.

$(function(){
 $('#notification').on('click', '.close', function(){
    $(".success").hide(200);// время закрытия 0,2 секунды. Можно изменить    
 });
});

ну, или внутри вашего условия слушайте click, а по клику удаляйте "слушание".

Comments

[alex88a]

изменил на ваш код, не работает, выводит

jquery-2.1.1.min.js:3 Uncaught TypeError: ((n.event.special[g.origType] || {}).handle || g.handler).apply is not a function
    at HTMLDivElement.dispatch (jquery-2.1.1.min.js:3)
    at HTMLDivElement.r.handle (jquery-2.1.1.min.js:3)

[Владимир Проскурин]

alex88a, ой, я забыл убрать кусочек лишнего. Теперь ок.

[2cha.headz]

$('#notification').on('click', '.close', function(){
    $(".success").hide(200);
 });

[alex88a]

Дмитрий Глаголев, решил проблему вашим советом, добавил

$('.close').click(function(){
    $(".success").hide(200);// время закрытия 0,2 секунды. Можно изменить    
 });

в файл js сразу после

$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

и все работает. Большое спасибо за помощь!

[Владимир Проскурин]

alex88a, тогда еще добавьте удаление обработчиков события

$('.close').click(function(){
    $(".success").hide(200);// время закрытия 0,2 секунды. Можно изменить    
    $('.close').unbind(); // удаляет все обработчики, можно написать только удаление клика $('.close').unbind('click')
 });

[alex88a]

Владимир Проскурин, спасибо!