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>

这是形式：

<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>-->

4

1 回答 1

1

这

$("#profile").fancybox();

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

您仍然需要在选择器上或通过 jQueryclick触发。click

由于您已经在另一个脚本中将选择器绑定#profile到了幻想框，因此您的函数可能只需要像这样触发它：

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

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

$("#askbox_text form").bind("submit", function() {
 $("#profile").trigger("click");
});
于 2012-05-28T19:54:58.033 回答