jQuery click + if + bind

Question

Я пытаюсь показать всплывающую подсказку, если поле поиска получило пустое значение. После того, как показана всплывающая подсказка, я хочу привязать функцию щелчка к телу, чтобы снова скрыть всплывающую подсказку. Но по какой-то причине после добавления команды привязки к функции щелчка, всплывающая подсказка вообще не появится. Я уже проверил консоль, но без каких-либо результатов. Вот мой код:

$('#search_top .search_click').click(function() { 
    if($('#search_top #suchfeld').val() == '') { 
     $('.search_tooltip, .search_tooltip:after').css('display', 'block'); 
     $('.search_tooltip, .search_tooltip:after').addClass('active'); 
     $('body').bind('click', closeTip); 
    } 
    else { 
     $('#search_top').submit(); 
    } 
}); 


function closeTip() { 
     $('.search_tooltip, .search_tooltip:after').css('display', 'none'); 
} 

Кто есть идея?

Answer 1

Я бы не использовать этот вид кода, но, кажется, что вы ищете:

$('#search_top .search_click').click(function (e) { 
    e.stopPropagation(); 
    if ($('#search_top #suchfeld').val() == '') { 
     $('.search_tooltip').show().addClass('active'); 
    } else { 
     $('#search_top').submit(); 
    } 
}); 

$(function() { 
    $('body').bind('click', closeTip); 
}); 

function closeTip() { 
     $('.search_tooltip').hide(); 
} 

Answer 2

:before и :after (и другие псевдо элементы) недоступны с помощью Javascript. Вы должны изменить класс родительского объекта в духе следующего:

div:before { 
    content: 'Lorem ipsum'; 
    display: none; 
} 

div.active:before { 
    display: block; 
}