Question

I have the following code. My issue is that when I click on the div maya, jquery doesn’t recognize it and
it will not give me the alert for it.

CSS

   <style>
   #carousel-single-image {
   width: 320px;
   height: 400px;
   margin: 0 auto;
   background: white;
   }
   #carousel-single-image .touchcarousel-container {
   height: 100%;
   background: url("../touchcarousel/demo-images/wood-pattern.jpg") repeat;
   }
   #carousel-single-image .touchcarousel-item {
   margin-right: 0;
   width: 400px;
   height: 400px;
   }
   #carousel-single-image img {
   width: 300px;
   height: 360px;
   margin: 32px 0 0 8px;
   float:left;
   position: relative;
   display: block;
   padding: 3px;
   background: transparent;
   border: 0;
   -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.6);
   -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.6);
   box-shadow: 0 1px 6px rgba(0,0,0,0.6);
   }
   #carousel-single-image .tc-paging-container {
   margin-top: -380px;
   }
</style>

HTML

<div id="productGallery" style="display:none">
   <div id="main-body">
      <div id="carousel-single-image" class="touchcarousel minimal-light">
         <ul class="touchcarousel-container">
            <li class="touchcarousel-item">
               <a href="#"> <img data-original="/image1.jpg" />
               <span class="maya">CheckClick</span></a>
            </li>
            <li class="touchcarousel-item">
               <a href="#"> <img data-original="/image2.jpg" />
               <span class="maya">CheckClick</span></a>
            </li>
         </ul>
      </div>
   </div>
</div>

Script

$('.maya').click(function(){
alert("hi");
});

Answer 1

Enclose in DOM Ready Event , and your script in the script tags

<script type="text/javascript">
    $(function() {
        $('.maya').click(function(){
            alert("hi");
        });
    });
</script>

Also make sure the jQuery file is included into your project..

Seems to be working HERE