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

I get:

""

谢谢！

- Henk Denneboom

---

jQuery中的live()函数可能会对你有所帮助。我现在无法完全了解你的问题，但那可能是你的答案。 - James Skidmore

谢谢。我尝试在$('button').click事件上使用它，但是不起作用:(。当我手动设置值时，通过$('#search_avatar').val('test')。值会改变。之后，当我尝试通过$('#search_avatar').val()获取它时，它会显示出来（Firebug） - Henk Denneboom

Answer 1

Fancybox会创建一个要显示的所有元素的副本并将它们放置到一个单独的层中。结果，会有两个输入元素：原始的一个和在Fancybox窗口中更改的一个。

这里是一张带有视觉解释的图片：链接 因此，当您尝试使用以下代码访问“search_avatar”输入值时：

$('#search_avatar').val()

jQuery返回一个空字符串，因为：

1. 它选择了所有id=search_avatar的元素（树中有两个元素。实际上，拥有相同id的两个元素是一个坏主意，所以您可以考虑使用类代替id。）；
2. 它返回选择条件内第一个输入的值（这是您第一个输入元素的空值）。

要获取位于Fancybox窗口中的输入元素的值，您可以简单地扩展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;
});

希望这有意义，并能帮助您。

- user186994

---

谢谢。那张图片胜过千言万语。 - MattD

Answer 2

这个使用jQuery live事件非常顺畅： http://docs.jquery.com/Events/live

$("#fancy_div #yourbuttonId").live("click", function(){
    console.log($("#fancy_div #fieldId").val());
    return(false);
});

- Jorre