花式框内输入

我有一个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()

我得到：

""

谢谢！

来源

2009-09-27 Henk Denneboom

jQuery的活（）函数可以帮助你。我现在无法完全查看您的问题，但这可能是您的答案。 – 2009-09-27 05:47:13

谢谢。我尝试了$（'button'）。click事件。但没有，不起作用:(。当我手动设置值，通过$（'＃search_avatar'）。val（'test'）。值改变。之后，当我试图通过$（' #search_avatar'）。val（）显示出来（Firebug） – 2009-09-27 06:36:32

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; 
});

希望这会让s并会帮助你。

来源

2009-10-09 12:37:44

谢谢。这张图片价值1000字。 – MattD 2011-01-14 15:59:53

这个工程就像一个魅力，使用jQuery现场活动： http://docs.jquery.com/Events/live

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

来源

2010-01-12 08:45:02 Jorre

花式框内输入

回答

相关问题