Eingaben innerhalb Fancybox

Ich habe ein sehr seltsames problem mit Fancybox.

Ich kann nicht scheinen, um die .val() der Eingänge, die angezeigt werden in der Fancybox. Sie haben einen Wert von "". Die Eingänge außerhalb der Fancybox, jedoch die Arbeit.

Mein code:

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

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

Also im Grunde. Ich klicke auf den link. Die Fancybox angezeigt. Ich füge den text im input (das ist text), Wenn ich auf die bekomme ich diese (in Firebug):

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

Wenn ich diese ausführen:

$('#search_avatar').val()

Bekomme ich:

""

Dank!

Die live () - Funktion in jQuery Ihnen helfen kann, sich. Ich kann nicht schauen Sie in Ihr problem völlig Recht, jetzt, aber das kann die Antwort sein.
Danke. Ich habe versucht, es über die $('button').klicken Sie auf Ereignis. Aber Nein, funktioniert nicht :(. Wenn ich den Wert manuell, per $('#search_avatar').val('test'). Der Wert ändert. Nach, dass, wenn ich versuchen, es zu bekommen über $('#search_avatar').val() es zeigt sich (Firebug)

InformationsquelleAutor Henk Denneboom | 2009-09-27

6

Fancybox erstellt eine Kopie aller Elemente, die Sie gehen, um anzeigen und stellen Sie Sie in einer separaten Ebene. Im Ergebnis gibt es zwei input-Elemente, die im original, und das man Sie ändern, in einer Fancybox-Fenster.

Hier ist das Bild eine visuelle Erklärung.

So, wenn Sie versuchen Zugriff auf "search_avatar" input-Wert mit diesem code:
```
$('#search_avatar').val()
```
jQuery gibt eine leere Zeichenfolge zurück, weil:
1. Es wählt alle Elemente mit der id=search_avatar (es gibt zwei Elemente in der Struktur. eigentlich ist dies eine schlechte Idee, zwei Elemente mit der gleichen id, so können Sie denken, der Verwendung von Klassen anstelle von ids.);
2. Gibt es einen Wert der ersten Eingabe innerhalb der Selektor Kriterien (das ist Ihre erste input-element mit einem leeren Wert).
Um den Wert des input-Elements, der sich in einer Fancybox-Fenster können Sie einfach erweitern jQuery-Ausdruck:
```
$('div#fancy_div input#search_avatar')
```
So, statt dieses:
```
$('button').click(function(){

 console.log($('input#search_avatar'));

 return false;
});
```
Können Sie versuchen, den folgenden code:
```
$('button#search_avatar_submit').click(function() {
 var searchAvatar = $('div#fancy_div input#search_avatar');
 console.log(searchAvatar, searchAvatar.val());
 return false;
});
```
Hoffe, das macht Sinn und wird Ihnen helfen.
- Danke. Das Bild sagt mehr als 1000 Worte.
InformationsquelleAutor Alex Bernatskyi

Diese funktioniert wie ein Charme, mit jQuery live-events:
http://docs.jquery.com/Events/live

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

InformationsquelleAutor Jorre

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.