Login Inside Fancybox

Question

I have a very strange problem with Fancybox.

I can't seem to get the .val () of the inputs that appear in Fancybox. They have the meaning of "". However, inputs outside of Fancybox work.

My code is:

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

And 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>

So basically. I click on the link. Fancybox appears. I add text to the tab (this is text). When I click the "I" button, I will get this (in Firebug):

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

When I do this:

$('#search_avatar').val()

I get:

""

Thanks!

Answer 1

Fancybox creates a copy of all the elements you are about to display and puts them in a separate layer. As a result, there are two input elements, the original and the one that you change in the Fancybox window.

.

, "search_avatar" :

$('#search_avatar').val()

jQuery , :

• id = search_avatar ( : , ids.);
• ( ).

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

, .

Answer 2

, jQuery: http://docs.jquery.com/Events/live

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