在 Fancybox 内输入答案

【问题标题】：Input inside Fancybox在 Fancybox 内输入
【发布时间】：2009-09-27 05:37:55
【问题描述】：

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

我明白了：

""

谢谢！

【问题讨论】：

jQuery 中的 live() 函数可能会对您有所帮助。我现在无法全面调查您的问题，但这可能是您的答案。
谢谢。我在 $('button').click 事件上尝试过。但是不，不起作用:(。当我通过 $('#search_avatar').val('test') 手动设置值时。值会发生变化。之后，当我尝试通过 $('#search_avatar 获取它时').val() 它出现了（萤火虫）

标签： jquery input fancybox

【解决方案1】：

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

这里是the image，带有视觉解释。

因此，当您尝试使用此代码访问“search_avatar”输入值时：

$('#search_avatar').val()

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

它选择所有 id=search_avatar 的元素（树中有两个元素。实际上，让两个元素具有相同的 id 是个坏主意，因此您可能会考虑使用类而不是 id。);
它返回选择器条件内第一个输入的值（这是您的第一个具有空值的输入元素）。

要获取位于 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;
});

希望这是有道理的，并会帮助你。

【讨论】：

谢谢。那张照片值 1000 字。

【解决方案2】：

这就像一个魅力，使用 jQuery 实时事件： http://docs.jquery.com/Events/live

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

【讨论】：