Iggy of Pop of hip hop Iggy of Pop of hip hop - 4 months ago 19
Javascript Question

Jquery is autoclicking

I have got this html

<div class="tagc">
<p class='HidTagc'>Hide</p>
<p class='tpt'>Tagged people</p>
</div>


And this jquery

$(".HidTagc").click(function(event) {
$(this).parent().css({'border-bottom':"1px solid"});
$(this).siblings().css('border-bottom', '0');
$(this).html("Show").addClass('showt');
});
$(".tagc").delegate('.showt', 'click', function() {
$(this).parent().css({'border-bottom':"0"});
$(this).siblings().css('border-bottom', '1px solid');
});


So the problem is when i click "Hide" it works perfectly but as soon as it changes css to
'border-bottom':"1px solid"
one second after it auto changes
to
'border-bottom':"0"
which is i think because of this line

$(this).html("Show").addClass('showt');


So how can i make this work properly

Answer

You have to stop the event from bubbling,

 $(".HidTagc").click(function(event) {
   event.stopPropagation();

to stop that from happening. .tagc is a parent of .HidTagc. So whenever you clicks on .HidTagc, the event will be propagated to tagc also.