0

私は次のコードを持っています。私の問題は、div mayaをクリックしても、jqueryがそれを認識せず、アラートを表示しないことです。

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>

脚本

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

2 に答える 2

2

DOM Ready Eventで囲み、スクリプトをscriptタグで囲みます

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

また、jQueryファイルがプロジェクトに含まれていることを確認してください。

ここで働いているようです

于 2012-10-01T18:52:06.663 に答える
1

これが機能するフィドルです...私はあなたのコンテナ全体でdisplaynoneスタイルを取り出しただけなので、それを見ることができますhttp://jsfiddle.net/wcLn4/

これは、css http://jsfiddle.net/wcLn4/1/を使用し、表示なしで表示されます。

于 2012-10-01T19:06:10.927 に答える