JQuery ("button").click doesn't work

Question

The example below works. (Example taken from w3cschools, and hacked a bit.) Clicking anywhere in the DIV will cause the address class div to disappear. However, changing the third line of the script to read

$("button").click(function(){

instead of "div" and it just sits there like a paperweight. What am I missing.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").click(function(){
    $(this).children(".address").toggle("slow");

  });
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>

<h3>Island Trading</h3>
<div class=ex>
    <button>Hide me</button>
  <div class=address>
    <p>Contact: Helen Bennett<br> 
    Garden House Crowther Way<br>
    London</p>
  </div>
</div>

<h3>Paris spécialités</h3>
<div class=ex>
<button class="hide">Hide me</button>
<div class=address>
<p>Contact: Marie Bertrand<br> 
265, Boulevard Charonne<br>
Paris</p>
</div>
</div>

</body>
</html>

To further explain, $('button') doesn't have children, and therefor when you try to get children with the class .address it doesn't find anything. You need to change the selector to something that will work. — lemieuxster
– lemieuxster, Commented Jan 24, 2014 at 0:01
this works as well according to your codes : $(this).next(".address").toggle("fast"); — F.C.Hsiao
– F.C.Hsiao, Commented Jan 24, 2014 at 1:51

Leeish · Accepted Answer · 2014-01-24 00:00:10Z

2

Change

$(this).children(".address").toggle("slow");

To something like:

$('.address').toggle("slow");

OR

$(this).siblings(".address").toggle("slow");

Once you make the listener act on the button element, .address is not a child of button any longer. It's a sibling. If there will be multiple .address classes on your page, you must use siblings.

http://jsfiddle.net/9S722/1/

answered Jan 24, 2014 at 0:00

Leeish

5,2132 gold badges20 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sherwood Botsford Over a year ago

Thanks! I was just coming back to answer my own question. Loading Firebug, and showing the exploded view of the html code showed me that <button> was a sibling of <div class=address> and not a parent. It worked the first time because the selector chose the parent of <button> Nice answer. Thanks.

Hanlet Escaño · Accepted Answer · 2014-01-24 00:00:18Z

0

Try this:

$("button").on("click", function(){
    $(this).parent().children(".address").toggle("slow");
});

http://jsfiddle.net/hescano/9S722/

answered Jan 24, 2014 at 0:00

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

5 Comments

Leeish Over a year ago

Why not use siblings rather than travel up and back down the DOM?

Hanlet Escaño Over a year ago

@Leeish From a JavaScript perspective, how would you say the .siblings() jQuery function is built?

Leeish Over a year ago

From the write less, do more perspective of jQuery, what's the point of jQuery if not to write less. one method call over two sounds better to me. If I wanted to know how the siblings function worked, I wouldn't be writing with jQuery, I'd be writing vanilla.

Hanlet Escaño Over a year ago

You say one method call over two sounds better, yet you choose to ignore the implementation of the methods. If you don't want to know how the siblings function worked, then how do you know the siblings method is not making two, three or four method calls?

Leeish Over a year ago

I'm saying why write out two calls when one will do? Especially if siblings jumps to parent and back down. The point of jQuery is to write less.

mattbeck · Accepted Answer · 2014-01-24 00:01:09Z

0

$(this).parent().children(".address").toggle("slow");

The button doesn't have children

answered Jan 24, 2014 at 0:01

mattbeck

1357 bronze badges

Comments

richie · Accepted Answer · 2014-01-24 00:04:56Z

0

$("div").click(function(){
    $(this).children(".address").toggle("slow");
});

The meaning of such code above is that, when click trigger in div container, it will go through its children for matching "address" class attribute.

However, if you just change $("div") to $("button"), but no child appears within button element. nothing matches for toggle function, just ignore it.

You should change code to as below:

$("button").click(function () {
    $(this).next(".address").toggle("slow");
});

which find next sibling to button element. That is the element you want.

answered Jan 24, 2014 at 0:04

richie

1993 bronze badges

Collectives™ on Stack Overflow

JQuery ("button").click doesn't work

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related