在Fancybox中输入

Question

我对Fancybox有一个非常奇怪的问题.

我似乎无法获得Fancybox中显示的输入的.val().它们的值为"".然而,Fancybox之外的输入工作.

我的代码:

<script type="text/javascript">
    $(document).ready(function() {
$('a#inline').fancybox({
'hideOnContentClick': false,
'frameWidth': 500,
'frameHeight': $('#avatars').height(),
'callbackOnShow':
function() {

 $('#gallery div img').click(function(){
  $('#inline img').attr('src', $(this).attr('class'));
  $('input#avatar').attr('value', $(this).attr('class'));
 });

 $('button').click(function(){

  console.log($('input#search_avatar'));

  return false;
 });
 }
 });
 });

和HTML:

<fieldset>
<div id="avatars" style="float:left; width:500px; display:none;">
<form method="post" action="">
 <fieldset>
  <input type="text" name="search_avatar" id="search_avatar" />
  <button id="search_avatar_submit">Filter</button>
 </fieldset>
 <div id="gallery">
  <div><img src="2_s.jpg" class="2_s.jpg" /></div>
 </div>
</form>
</div>
<a id="inline" href="#avatars"><img id="avatar" src="file.png" /></a>

<input type="hidden" name="avatar" value="" id="avatar" />
</fieldset>

所以基本上.我点击链接.Fancybox出现了.我在输入中添加文本(这是文本),当我点击我将得到这个(在Firebug中):

[input#search_avatar, input#search_avatar This is text]

当我执行这个:

$('#search_avatar').val()

我明白了:

""

谢谢!

Answer 1

Fancybox会创建您要显示的所有元素的副本,并将它们放入单独的图层中.结果,有两个输入元素,原始的,以及您在Fancybox窗口中更改的元素.

这是带有视觉解释的图像.

因此,当您尝试使用以下代码访问"search_avatar"输入值时:

$('#search_avatar').val()

jQuery返回一个空字符串,因为:

1. 它选择id = search_avatar的所有元素(树中有两个元素.实际上这两个元素具有相同的id是个坏主意,所以你可能会想到使用类而不是id.);
2. 它返回选择器条件中第一个输入的值(这是您的第一个具有空值的输入元素).

要获取位于Fancybox窗口中的input元素的值,您可以简单地扩展jQuery表达式:

$('div#fancy_div input#search_avatar')

所以,而不是这个:

$('button').click(function(){

 console.log($('input#search_avatar'));

 return false;
});

您可以尝试以下代码:

$('button#search_avatar_submit').click(function() {
 var searchAvatar = $('div#fancy_div input#search_avatar');
 console.log(searchAvatar, searchAvatar.val());
 return false;
});

希望这是有道理的,并会帮助你.