在Fancybox内输入 [英] Input inside Fancybox
问题描述
我对Fancybox有一个非常奇怪的问题.
I have a very strange problem with Fancybox.
我似乎无法获得在Fancybox中显示的输入的.val().它们的值为".不过,Fancybox之外的输入仍然有效.
I can't seem to get the .val() of the inputs which are displayed in Fancybox. They have a value of "". The inputs outside of Fancybox, however work.
我的代码:
<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出现.我在输入中添加文本(这是文本),当我单击"i"时,我会得到它(在Firebug中):
So basically. I click on the link. The Fancybox shows up. I add text in the input (this is text), When I click the i will get this (in Firebug):
[input#search_avatar, input#search_avatar This is text]
当我执行此操作时:
$('#search_avatar').val()
我得到:
""
谢谢!
推荐答案
Fancybox会创建要显示的所有元素的副本,并将它们放置在单独的图层中.结果,有两个输入元素,一个是原始元素,另一个是您要在Fancybox窗口中更改的元素.
Fancybox creates a copy of all elements you're going to display and places them into a separate layer. In result, there are two input elements, the original one, and the one you're changing in a Fancybox window.
这是图像,带有直观说明.
Here is the image with a visual explanation.
因此,当您尝试使用以下代码访问"search_avatar"输入值时:
So when you're trying to access "search_avatar" input value using this code:
$('#search_avatar').val()
jQuery返回一个空字符串,因为:
jQuery returns an empty string because:
- 它选择所有id = search_avatar的元素(树中有两个元素.实际上,让两个元素具有相同的id是一个坏主意,因此您可能会考虑使用类而不是id.);
- 它返回选择器条件内的第一个输入的值(这是您的第一个输入值为空值).
- It selects all elements with id=search_avatar (there are two elements in the tree. actually this is a bad idea to have two elements with the same id, so you may think of using classes instead of ids.);
- It returns a value of the first input within selector criteria (which is your first input element with empty value).
要获取位于Fancybox窗口中的input元素的值,您可以简单地扩展jQuery表达式:
To get a value of input element that is located in a Fancybox window you can simply extend jQuery expression:
$('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;
});
希望这是有道理的,对您有帮助.
Hope this makes sense and will help you.
这篇关于在Fancybox内输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!