CODEWITHSUNDEEP
jquery
wezyourboat
wezyourboat

Reputation: 41

I cant get alert to appear when click function in jQuery

Im struggling to get this alert to appear when click on the .cake's. 

 <ul class="block-container shorthand">
    <li class="block"><img class="cake" src="http://i.imgur.com/MMRz8fe.gif"></li>
    <li class="block"><img class="cake" src="http://i.imgur.com/vkpuOZ5.png"></li>
    <li class="block"><img class="cake" src="http://i.imgur.com/mD8T7FM.png"></li>
    <li class="block"><img class="turkey" src="http://i.imgur.com/Sxj6zq8.png" onmouseover="this.src='http://i.imgur.com/X5l9hAs.png'" onmouseout="this.src='http://i.imgur.com/Sxj6zq8.png'" /></a></li>
</ul>

     .block-container {
  padding: 60px 70px 70px 70px;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shorthand { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.block {
  background: #d31c1c;
  margin: 20px;
  width: 281px;
  height: 281px;
  padding: 20px;
}
.cake {
  max-width: 281px;
}
.turkey {
  max-width: 281px;
}

 $(document).ready(function(){
    $(".cake").click(function(){
        alert("You're into your cake, huh?!");
    });
});

http://codepen.io/mentionbenjamin/pen/wzkGoy

Tried for an hour and just going in circles.

Thank you stackoverflow, i will pay back to the community once i know what im doing!!

Upvotes: 0

Views: 52

Answers (2)

DSM
DSM

Reputation: 46

$(function(){
 $(".cake").each(function(){
    $(this).click(function(){
         alert(' Your message');
      });
});
})

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

You have not included the Jquery file at all. You need to include the Jquery file for your custom and other jquery plugins to work.

Add this tag into your HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Also you can download the Jquery file and have it in your local project folder and point to that file, The above one is pointing to CDN and works only when you have internet (as it has to be downloaded from the cloud).

Your modified codepen

Upvotes: 3

Related Questions