jQuery click + if + bind

Question

I am trying to show a tooltip if a searchfield got a empty value. After the Tooltip is shown, i want to bind a click function to the body to hide the tooltip again. But for some reason after adding the bind command to the click function, the tooltip wont even appear. I already checked the console, but without any results. Here is my Code:

$('#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');
}

Anyone got an idea?

Don't forget to unbind the closeTip click handler in the closeTip function. — BNL, Aug 01 '13 at 13:16
http://webdesignledger.com/tips/9-jquery-mistakes-you-shouldnt-commit 4) 5) — Virus721, Aug 01 '13 at 13:21

score 1 · Accepted Answer · answered Aug 01 '13 at 13:13

1

I wouldn't use this kind of code but seems to be what you are looking for:

$('#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();
}

answered Aug 01 '13 at 13:13

A. Wolff

74,033
9
94
155

Worked perfect thanks. What I dont get is, why is the function to bind the closeTip function triggering after the Tooltip is opened? – Basti Aug 01 '13 at 13:21
1

Because when clicking on .search_click event propagate to body and then closes the tooltip. That's why i use `e.stopPropagation();` – A. Wolff Aug 01 '13 at 13:22
Dont know about this function, this is pretty cool, thanks a lot ! :-) – Basti Aug 01 '13 at 13:27

score 0 · Answer 2 · answered Aug 01 '13 at 13:11

0

:before and :after (and other pseudo elements) are not accessible with Javascript. You should change the class of the parent object in the spirit of the following:

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

div.active:before {
  display: block;
}

answered Aug 01 '13 at 13:11

adrenalin

1,656
1
15
25

You're sure about this? Cause my this worked without any problems: $('.search_tooltip, .search_tooltip:after').css('display', 'block'); $('.search_tooltip, .search_tooltip:after').addClass('active'); – Basti Aug 01 '13 at 13:19
There have been several questions about it already, including [this one](http://stackoverflow.com/questions/17108475/cant-edit-css-styles-for-before-after) – adrenalin Aug 01 '13 at 13:40

jQuery click + if + bind

2 Answers2