jquery - jQuery 送信 (); 価値を拾わない

Question

ボタンを非表示にし、クリックされた画像に応じて選択することで、ラジオボタンの画像置換を使用しています。

画像がクリックされたら、ラジオボタンを選択して送信してもらいます。

これは私の元のコードです：

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', true);
});

これは、画像をクリックして送信すると機能します。

クリック時にフォームを送信するように拡張しました。

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', true);
  $("#settings").submit();
});

この場合、フォームは送信されますが、値は変更されません。ボタンをクリックして送信すると、正常に動作します。

どこで間違ったのですか？

score 1 · Accepted Answer

ここでの問題は、属性trueに与えられた値でしたchecked。

提供されているjsfiddleは Chrome で動作します。しかし、Firefoxにはありません。Firefox でも機能させるにcheckedは、属性の値を使用しcheckedます。

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', 'checked');
});

別の方法として、DOM 要素のプロパティを (同様に)直接操作することもできます。checked

$(this).parent().find(":radio").get(0).checked = true;

score -1 · Accepted Answer

最良の答えではないかもしれませんが、画像に置き換えることができるクラスを指定すると、 #settings img を .image にすると機能します

score -1 · Accepted Answer

Javascript は非同期です。jQueryがチェックボックスをチェックする前に、フォームが送信されているようです。送信をコールバックに入れてみてください:

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', true).one('change', function(){
     $("#settings").submit();
  });
});

score -2 · Accepted Answer

私はあなたの問題をフォークしました: http://jsfiddle.net/fC38V/そしていくつかの追加を行いました:

$('#settings').submit(function(){
    alert($(this).serialize());
});

$('#settings img').click(function() {
    $(this).parent().find(":radio").attr('checked', true);
    $("#settings").submit(); // submits form on click
});

クリックハンドラーの前にサブミットハンドラーを追加し、フォークされたフィドルをテストすることで、ブラウザー (Mac OS X 10.8 の Safari 6.0.1) で意図したとおりに (説明からわかる限り) 動作することのみを確認できます。

次のことを確認してください。

ネストフォームはありません。ブラウザはこれについて非常にうるさいことがあります。
ID「#settings」を持つ要素は 1 つだけです

他に考えられる唯一の問題は、ブラウザです...何を使用していますか?

jquery - jQuery 送信 (); 価値を拾わない

4 に答える 4

Related

Reference