Fatal编程技术网
  • jquery/
  • Jquery FancyBox在函数内部不工作

Jquery FancyBox在函数内部不工作

jquery wordpress function

Jquery FancyBox在函数内部不工作,jquery,wordpress,function,fancybox,Jquery,Wordpress,Function,Fancybox,我有一个输入表单，在提交时（按下回车键），我想显示一个Fancybox。我为它做了一个函数，但它不会触发。奇怪的是，警报起作用了 这就是功能： <script type="text/javascript"> function showBox(){ $("#profile").fancybox({ 'width' : '75%', 'padding' : '0',

我有一个输入表单，在提交时（按下回车键），我想显示一个Fancybox。我为它做了一个函数，但它不会触发。奇怪的是，警报起作用了

这就是功能：

  <script type="text/javascript">
    function showBox(){
        $("#profile").fancybox({
            'width'             : '75%',
            'padding'           : '0',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'fade',
            'transitionOut'     : 'fade',
            'type'              : 'inline',
        });
        alert('ga');
    }
  </script>


函数显示框（）{
$（“#配置文件”）.fancybox({
“宽度”：“75%”，
“padding”：“0”，
“高度”：75%，
“自动缩放”：false，
“transitionIn”：“fade”，
“transitionOut”：“fade”，
“类型”：“内联”，
});
警报（“ga”）；
}
以下是表格：

<form action="javascript:showBox()" method="get">
<input name="s" type="hidden" value="add" />
<input name="pr" type="text" class="ask" placeholder="Placeholder text. So far."/> 
</form>
我在这里真的不知所措，我需要一只手

编辑：整个文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Answers Archive<?php } ?> <?php wp_title(); ?></title>
<?
$option1 = get_option("WpAnswersoption1Options");
$pathfavico=str_replace('../','',$option1['favicon']);
?>
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/<? echo $pathfavico ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php if($option1['rss']!=''){ echo $option1['rss']; }else{bloginfo('rss2_url');} ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

    <script type="text/javascript">
        $(document).ready(function() 
        {

            $("#profile").fancybox({
                'width'             : '75%',
                'padding'           : '0',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
            });

            $("#profile-public").fancybox({
                'width'             : '75%',
                'padding'           : '0',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
            });

$("#button_right").mouseover(function () {
      $(this).hide("slide", { direction: "down" }, 1000);
      alert("ga");
});

  });
  </script>


  <script type="text/javascript">
        function showBox(){
            $("#profile").fancybox({
                'width'             : '75%',
                'padding'           : '0',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
            });
            alert('fa')
        };
  </script>


<script>
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}
</script>



</head>
<body>

<div id="container">
<?php do_action('beforehead'); //added by tomas ?>
<div id="header">

<div style="display: none;">
    <div id="profile_container">
        <div id="profile-picture">
            <div class="mask" style="padding-top:8px;"><?php
                global $current_user;
                get_currentuserinfo();
                echo get_avatar( $current_user->ID, 150 );
            ?>
            </div>
                <div class="details">
                    <h3>Change profile picture</h3>
            </div>

        </div>
        <div id="profile-name">
            <?php global $current_user;
                get_currentuserinfo();
                echo $current_user->user_login;
            ?> 
        </div>
        <div id="profile-fullname">
            <?php global $current_user;
                get_currentuserinfo();
                echo "(" . $current_user->user_firstname . "&nbsp;" . $current_user->user_lastname . ")";
            ?> 
        </div>

       <div id="social">
            <span class="icon">
                <a href="http://twitter.com/<?php echo get_user_meta(1, 'twitter', true); ?>" title="Follow <?php echo $current_user->user_login; ?> on Twitter"><img src="<?php bloginfo('template_directory'); ?>/images/social/twitter-icon.png" /></a>
            </span>

            <span class="icon">
                <a href="http://facebook.com/<?php echo get_user_meta(1, 'facebook', true); ?>" title="Add <?php echo $current_user->user_login; ?> on Facebook"><img src="<?php bloginfo('template_directory'); ?>/images/social/facebook-icon.png" /></a>
            </span>
       </div>
    </div>
</div>


<div style="display: none;">
    <div id="profile_container_public">
        <div id="profile-picture">
            <div style="padding-top:8px;">
            <?php
            if (have_posts()){
                echo get_avatar( get_the_author_meta('ID'), 150 );
            }
            ?>
        </div>
        </div>
        <div id="profile-name">
             <?php
            global $post;
            echo $post->post_author;
            ?>
  </div>
        <div id="profile-fullname">
        </div>

       <div id="social">
            <span class="icon">
                <a href="http://twitter.com/<?php the_author_meta('twitter'); ?>" title="Follow <?php echo $current_user->user_login; ?> on Twitter"><img src="<?php bloginfo('template_directory'); ?>/images/social/twitter-icon.png" /></a>
            </span>

            <span class="icon">
                <a href="http://facebook.com/<?php the_author_meta('facebook'); ?>" title="Add <?php echo $current_user->user_login; ?> on Facebook"><img src="<?php bloginfo('template_directory'); ?>/images/social/facebook-icon.png" /></a>
            </span>
       </div>
    </div>
</div>



<?php if (is_user_logged_in() ) {?>
<div id="welcome_text">Hello, &nbsp;<span id="welcome_user"><?php global $current_user; get_currentuserinfo(); echo $current_user->user_login  ?></span></div>
<?php } else {?>
<div id="welcome_text">Greetings, stranger. <span id="welcome_user"><a href="/wp-login.php?redirect_to=<?php echo $_SERVER['REQUEST_URI']; ?>" class="simplemodal-login">Log in</a></span> or <span id="welcome_user"><a href="/wp-login.php?action=register" class="simplemodal-register">Register</a></span>!</div>
<?php } ?> 

<?php if (is_user_logged_in() ) {?>
<a href="<?php echo wp_logout_url( home_url() ); ?>" id="power_out"></a>
<a href="" id="help" title="Help"></a>
<a href="<?php bloginfo('url'); ?>/profile/<?php global $current_user; get_currentuserinfo(); echo $current_user->user_login  ?>" id="user" title="Profile"></a>

<?php } else {?>
<a href="/wp-login.php?redirect_to=<?php echo $_SERVER['REQUEST_URI']; ?>" class="simplemodal-login" id="power"></a>
<?php } ?>


<div id="righthead">
<?php do_action('righthead') ?>
</div>
<?
$option1 = get_option("WpAnswersoption1Options");
$pathlogo=str_replace('../','',$option1['logo']);
?>


<?php if (is_user_logged_in() ) {?>
<div id="avatar_box" >
<a id="profile" href="#profile_container"><?php
        global $current_user;
        get_currentuserinfo();
        echo get_avatar( $current_user->ID, 64 );
 ?></a>
 </div>
<?php } else {?>
<div id="avatar_box">
<?php
        global $current_user;
        get_currentuserinfo();
        echo get_avatar( $current_user->ID, 64 );
 ?>
 </div>
<?php } ?>



</div><!-- end header -->
<div id="logo"><a href="<?php bloginfo('url'); ?>" title="I Want An Idea!" id="logo"></a></div>

<div id="askbox">
    <div id="askbox_text_border">
        <div id="askbox_text">
            <form action="javascript:showBox()" method="get">
                <input name="s" type="hidden" value="add" />
                <input name="pr" type="text" class="ask" placeholder="I want an awesome idea about..."/> 
            </form>
        </div>
    </div>
</div><!-- end askbox -->

<div id="main">




<!--<div id="recentbox">
<ul>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/themes/Wp-Answers-Black/images/recent-button.gif" height="38" width="117" alt="Recent Ideas"/></a></li>
<li><a href="<?php bloginfo('url'); ?>/?s=popular"><img src="<?php bloginfo('url'); ?>/wp-content/themes/Wp-Answers-Black/images/popular-button.gif" height="38" width="127" alt="Popular Questions"/></a></li>
</ul>
</div>-->


这个

不会触发fancybox，它只是将选择器
#profile
绑定到它，因此您的函数
showBox（）
实际上正在尝试再次将此类选择器绑定到fancybox（您已经在文档的其他地方有一个这样做的脚本）

您仍然需要，
单击选择器上的
，或者通过jQuery触发
单击

由于您已经将选择器
#profile
绑定到另一个脚本中的fancybox，因此您的函数可能只需要像以下那样触发它：


function showBox(){
 $("#profile").trigger("click");
}


或者，您更愿意将
bind
将
submit
事件绑定到触发fancybox的函数，而不是尝试将其附加到
action
属性


$("#askbox_text form").bind("submit", function() {
 $("#profile").trigger("click");
});



先生，你是个天才。然而，还有一个问题。提交后，页面将重定向。我能阻止这种情况发生吗？可能添加
返回false.bind（）
方法，则在
.trigger（）
方法之后执行code>。更多示例，请参见第5项。

$("#askbox_text form").bind("submit", function() {
 $("#profile").trigger("click");
});