CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sherwood Botsford
Sherwood Botsford

Reputation: 1997

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

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>

Upvotes: 0

Views: 5362

Answers (4)

richie
richie

Reputation: 199

$("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.

Upvotes: 0

mattbeck
mattbeck

Reputation: 135

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

The button doesn't have children

Upvotes: 0

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

Try this:

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

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

Upvotes: 0

Leeish
Leeish

Reputation: 5213

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/

Upvotes: 2

Related Questions