我有一个输入表单并在提交（按下回车键）我想显示一个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() ) { ?> » 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 . " " . $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, <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>-->
答案 0 :(得分：1)
这个
$("#profile").fancybox();
不触发fancybox，它只是将选择器#profile绑定到它，所以你的函数showBox()实际上是试图再次将这样的选择器绑定到fancybox（你已经有了一个脚本在其他地方执行你的文件。）
您仍然需要选择器上的click或通过jQuery触发click。
由于您已将选择器#profile绑定到另一个脚本中的fancybox，因此您的函数可能只需触发它：
function showBox(){
$("#profile").trigger("click");
}
或者您希望将bind submit事件发送到触发fancybox的函数，而不是尝试将其附加到action属性
$("#askbox_text form").bind("submit", function() {
$("#profile").trigger("click");
});