CODEWITHSUNDEEP
javascriptjquery
Karel Bílek
Karel Bílek

Reputation: 37660

jquery hide hides and immediately displays again

jQuery is doing something strange for me: it just doesn't work and hides the div only for split a second. What am I doing wrong?

The code in question, as simple as can be.

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Experiment</title>
<script type="text/javascript" 
           src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<script>

        function doHiding() {
           $("div.thread").each(function() {
                    $(this).hide();
           });
        }


</script>
<a href="" onClick="doHiding()">Hide</a>

<div class="thread">I like trains.</div>
</body>
</html>

I am using Chromium on Linux. I see the div dissapear for split a second, but it appears again immediately.

Upvotes: 0

Views: 272

Answers (4)

lindosekai
lindosekai

Reputation: 184

try

href="#"

its work for this case

Upvotes: 0

Jai
Jai

Reputation: 74738

You can try the click event in jquery instead doing it inline.

http://jsbin.com/iseref/1/edit

html:

<a href="#">Hide</a>
<div class="thread">I like trains.</div>

jQuery:

 $(function(){
    $('a').on('click', function(e){
     e.preventDefault();
     doHiding();
    });
 });
function doHiding() {
  $("div.thread").each(function() {
    $(this).hide();
  });
}

Upvotes: 0

Schlaus
Schlaus

Reputation: 19202

You could try changing

<a href="" onClick="doHiding()">

into

<a href="#" onClick="doHiding()">

See: http://jsfiddle.net/aVNuf/

Upvotes: 1

mikakun
mikakun

Reputation: 2265

 function doHiding() {
       $("div.thread").each(function() {
                $(this).hide();
       });
      return false;
    }

it is not hiding again it is the page that is being refreshed because href="" links to same page

NB: i guess you used onClick="doHiding()" for the sake of demo only (otherwise handle your event within jquery scope)

Upvotes: 3

Related Questions