jQuery,fancybox工作,但只有当你点击这个图像两次

时间:2011-01-17 04:24:54

标签: jquery click fancybox live

我有问题......

JS

$('#Contact').ready(function(){
    $('a#Contact-Map').live('click',function(event){
        event.preventDefault();
        $('a#Contact-Map').fancybox({
            'transitionIn'  :   'elastic',
            'transitionOut' :   'elastic',
            'speedIn'           :   600, 
            'speedOut'          :   200, 
            'overlayShow'   :   true
        });
    });
});

HTML

<div class="Module-Frame" id="Contact">
    <a id="Contact-Map" href="./Modules/Contact/Images/mapa_big.png">
        <img src="./Modules/Contact/Images/mapa.png" alt=""/>
    </a>
</div>

此HTML代码由.load()jQuery函数加载。 这是有效的,但只有当你点击这个图像两次......

帮助请:)


JS with load()func

$(document).ready(function(){

    $("#Menu").children().click(function(event){
        $("#Content").hide().load('./Modules/'+ event.target.id.substr(5) +'/index.php', function() {
            $(this).fadeIn();
        });
    });



});



HTML

< html  >
< head  > ...

...
<body>
...
            <div id="Menu">
                <a id="Menu-News" href="#" title="Aktualnosci"> aktualności  |
                <a id="Menu-Aboutus" href="#" title="O nas"> o nas  | 
                <a id="Menu-Contact" href="#" title="Kontakt"> kontakt  | 
                <a id="Menu-Gallery" href="#" title="Galeria"> galeria 

            </div>
...
< div id=#content> ...

3 个答案:

答案 0 :(得分:13)

经过几个小时后,我只是通过改变来解决问题:

$(this).fancybox({
于:
$.fancybox(this,{

$('#Contact').ready(function(){
    $('a#Contact-Map').live('click',function(event){
        event.preventDefault();
        $.fancybox(this,{
            'transitionIn'  :   'elastic',
            'transitionOut' :   'elastic',
            'speedIn'           :   600, 
            'speedOut'          :   200, 
            'overlayShow'   :   true
        });
    });

});

答案 1 :(得分:0)

删除你的html中的onclick,它会在你的事件处理程序之前触发。

答案 2 :(得分:0)

我也遇到了这个问题。包含样式表后,单击即可工作。从README.md:

<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />