Вход внутри Fancybox

Question

У меня очень странная проблема с Fancybox.

Кажется, что я не могу получить .val() входов, отображаемых в Fancybox. Они имеют значение «». Однако входы вне 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() 

я получаю:

"" 

Спасибо!

Answer 1

Fancybox создает копию всех элементов, которые вы собираетесь отображать, и помещает их в отдельный слой. В результате есть два входных элемента, оригинальный и тот, который вы меняете в окне Fancybox.

Здесь the image с визуальным объяснением.

Так что, когда вы пытаетесь получить доступ к "search_avatar" значение входного сигнала с помощью этого кода:

$('#search_avatar').val() 

JQuery возвращает пустую строку, потому что:

1. Он выбирает все элементы с ID = search_avatar (в дереве есть два элемента: На самом деле это плохая идея иметь два элемента с одним и тем же идентификатором, поэтому вы можете использовать классы вместо ids.);
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; 
}); 

Надеюсь, что это делает и вам поможет.

Answer 2

Это работает как шарм, используя JQuery живые события: http://docs.jquery.com/Events/live

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