3

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()

私は得る：

""

ありがとう！

4

2 に答える 2

6

Fancybox は、表示するすべての要素のコピーを作成し、それらを別のレイヤーに配置します。その結果、元の要素と Fancybox ウィンドウで変更している要素の 2 つの入力要素があります。

これが視覚的な説明付きの画像です。

したがって、次のコードを使用して「search_avatar」入力値にアクセスしようとしている場合:

$('#search_avatar').val()

次の理由により、jQuery は空の文字列を返します。

  1. id=search_avatar を持つすべての要素を選択します (ツリーには 2 つの要素があります。実際には、同じ ID を持つ 2 つの要素を持つことは悪い考えであるため、ID の代わりにクラスを使用することを考えるかもしれません。 );
  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;
});

これが理にかなっていて、あなたを助けることを願っています.

于 2009-10-09T12:37:44.237 に答える
0

これは、jQuery ライブ イベントを使用して魅力的に機能します: http://docs.jquery.com/Events/live

$("#fancy_div #yourbuttonId").live("click", function(){
    console.log($("#fancy_div #fieldId").val());
    return(false);
});
于 2010-01-12T08:45:02.683 に答える