CODEWITHSUNDEEP
jqueryhtmlcss
Soarabh
Soarabh

Reputation: 2950

To display a message on click

I have a HTML markup like this, When,

<span class="placesBostPageHelpBg  placesBostHelpBg floatLeft voteHelpToolTip" id="HelpToolTipButton2">
<span class="placesBostHelpText">?</span>
</span>

CSS Used for Wrapper Span is 

.placesBostPageHelpBg {
background:none repeat scroll 0 0 #171716;
color:#63E6F4;
cursor:pointer;
height:20px;
left:5px;
position:relative;
top:-2px;
width:20px;
z-index:1;
-moz-border-radius:10px 10px 10px 10px;
}

Css used for Question mark 

.placesBostHelpText {
left:6px;
position:absolute;
top:2px;
z-index:2;
}

The output is just like a circle and inside the circle there is question mark. When anyuser click on that circle i have to display a message. Its working fine. But My Question is when i click on circle the circle it display a message but when i click on question mark the message would not display.

Used Java Script 

$('#HelpToolTipButton2').click(function() {$('#voteHelpMessageContainer2').toggle();});

Upvotes: 1

Views: 2061

Answers (3)

Joko Wandiro
Joko Wandiro

Reputation: 1987

u have html markup

<span class="placesBostHelpText">?</span>

u can't show message if u write script like this

$('#HelpToolTipButton2').click(function() {$('#voteHelpMessageContainer2').toggle();});

my opinion is u can use this script :

$('.placesBostHelpText').click( function() {
    alert("Test");
});

i think u have idea to join / change it in your script

Upvotes: 0

rahul
rahul

Reputation: 187080

$('#HelpToolTipButton2').click(function() {$('#voteHelpMessageContainer2').toggle();});

Since span is a child element of the circle element click on that span will cause event bubbling. To prevent this put return false; at the end of the click function.

$("span.placesBostHelpText").click(function(){
     $('#voteHelpMessageContainer2').hide();
     return false;
});

Upvotes: 2

Vivek
Vivek

Reputation: 11028

you have to fire click event on both span....something like

  
$('.placesBostHelpText #HelpToolTipButton2').click(function() {$('#voteHelpMessageContainer2').toggle();});

Upvotes: 0

Related Questions