Make Overlay在Jquery中可以点击

时间:2012-07-12 23:45:32

标签: jquery

我在下一页使用名为capSlide的jquery脚本

http://sundial.whistlerwebhosting.com/meetings-events/whistler-weddings

当用户将鼠标悬停在图片上方时,顶部会显示一个透明的叠加层,并且标题会以标题和更多信息链接向上滑动。

我想让整个div区域可以点击。我在想,因为叠加层显示在它的顶部,我需要通过链接激活它。我试图使用以下jquery脚本,但它无法正常工作。

jQuery('.overlay').click(function(){
     window.location=jQuery(this).parent().find('a').attr('href'); 
       return false;
});

HTML输出如下

<div class="ic_wrapper">
   <div id="capslide_img_cont11" class="ic_container"><img typeof="foaf:Image" src="/sites/all/themes/sundial/images/weddings/Wedding-Consulants.jpg" width="290" height="180" alt="Whistler Wedding Consulants" />
    <div class="overlay" style="display:none;"></div>
    <div class="ic_caption">
      <h3>Wedding Consulants</h3>
      <a href="/meetings-events/whistler-weddings/wedding-planners">
      <p class="ic_text">More Info</p>
       </a> </div>
   </div>
</div>

任何见解都将受到高度赞赏

2 个答案:

答案 0 :(得分:0)

我将假设您的点击事件未被注册,因为在脚本运行后添加了重叠div。尝试使用on()delegate() jQuery函数。一个例子:

 jQuery(".ic_container").on("click", ".overlay", function(){
        window.location = jQuery(this).parent().find('a').attr('href'); 
        return false;
 });

答案 1 :(得分:0)

在脚本文件(functions.js)中,您将单击处理程序设置在文档就绪函数之外。相反,将置于准备好的功能中

jQuery(document).ready(function() {
    jQuery('div#block-menu-menu-meeting-events-right.block div.content ul.menu li.last a').addClass('fancybox.iframe');

    // Your code has been moved to here...
    jQuery('.overlay').click(function(){
        window.location=jQuery(this).parent().children().find('a').attr('href'); 
        return false;
    });    
});

这使得它等到页面准备好后再应用你的点击处理程序。