Question

I have searched before posting but none of the posts are that relevant (saying that i am new to Jquery).

My problem is when i click the “add friend” button it wont fire upon a single click but it needs a double click.

These are the relevant sections of code:

Setting the div:

$fField = <div style="display:inline; border:#CCC 1px solid; padding:5px; background-color:#E4E4E4; color#999; font-size:11px;">
  <a href="#" onclick="return false" onmousedown="javascript:friendArea(\'addFriend\');">Add Friend</a>
  </div>;

Javascript:

function friendArea(x){
    //alert(x);
    if($('#'+x).is(":hidden")){
        $('#'+x).slideDown(200);
    } else {
        $('#'+x).hide();
    }
    $('.friendSlide').hide();
}

the message to display (the one which needs 2 clicks to be displayed)

<div class="friendSlide" id="addFriend">Are you sure?</div>

Any help would be much appreciated! Oh and I’m using the latest version of jQuery.

Answer 1

Hmm, well, it looks like you are showing and hiding your div at the same time:

HTML:

<div class="friendSlide" id="addFriend">Are you sure?</div>

JS:

function friendArea(x){
    //alert(x);
    if($('#'+x).is(":hidden")){
        $('#'+x).slideDown(200);
    } else {
        $('#'+x).hide();
    }
    $('.friendSlide').hide();
}

You call friendArea('addFriend'), which is supposed to slideDown your div, but at the end of the function you hide .friendSlide, of which your div is also a class. You basically hide it every time. This can’t be what you want.

Comment out that line and it works: http://jsfiddle.net/Ggdhp/

Of course, you might have had a different reason for that, but I think you are getting some divs and classes mixed up.

Note:
I would also suggest that you don’t use inline css or javascript. It always makes debug much more difficult, and you miss typos as you end up having to put everything on a single line and escape quotes. For instance, color#999; in your div style is missing a colon.