2012-04-16 13 views
0

現在、私は多くの問題を抱えているjQueryスクリプトに取り組んでいます。私はフレームワークの専門家ではありませんが、私はこれまで数多くの場面で成功裏に使用してきました。Jqueryバインディングが失敗しているようです

サブフォームのサブフォームとなる金額を設定しようとしています。私。ユーザは、ユーザ入力の追加のフォームフィールドに基づいてアンケートに記入し、この場合、その入力に基づいてより多くのフィールドを表示することができる。

この場合、制御要素を検索して何かを変更イベントにバインドするスクリプトにロードします。このアプローチは、最初のフォームフィールドでは機能しますが、別のフォームフィールドでは機能しません。コンテンツは、ajax経由ではなく、htmlの残りの部分とともにロードされます。本当に奇妙な部分は、デバッガを使用してコンソールを見れば、私が望む要素を見つけ出してchange()を呼び出そうとしているが、その後イベントが起きないということが分かる!

$('td.subFormYesControl input.CodebtorParentQuestion').each(function() { 
    console.log("Hit"); 
    //alert($(this).prop('class')); 
    $(this).on("change", function() { 
     if ($(this).val() == "1") { 
      $(this).parents('tbody').eq(0).children('tr.subFormRow').show(); 
      $(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show(); 
     } else { 
      $(this).parents('tbody').eq(0).children('tr.subFormRow').hide(); 
      $(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide(); 
     } 
    }); 
});​ 

私は少しの運勢で試行錯誤テストを行ってきました。私が$(document).ready()に包まれてからこれを$(window).load()に変更すると、FFでは動作しますが、IEでは動作しません。

誰でも何が起こっているかも知りませんか?

編集:すべての助けてくれてありがとう!使用している実装には生成されたhtmlがたくさんあるので、ここでは私が操作しようとしているコントロールの親要素があります。もっと役立つかどうか教えてください!

<td class="subFormYesControl"><input type="radio" value="1" id="c1_CodebtorsParent[0]0" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]0">Yes</label><br><input type="radio" checked="checked" value="0" id="c1_CodebtorsParent[0]1" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]1">No</label><br></td> 

EDIT 2:これはもっと奇妙に思えるが、私はヒントを見つけたと思う。以下に示すような単純なアラートを追加した場合:

 alert($(this).prop('class')); 
     $('td.subFormYesControl input.CodebtorParentQuestion').each(function() { 


    $(this).on("change", function() { 
     console.log($(this).length); 
        if($(this).val() == "1") { 
         $(this).parents('tbody').eq(0).children('tr.subFormRow').show(); 
         $(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show(); 
        } else { 
         $(this).parents('tbody').eq(0).children('tr.subFormRow').hide(); 
         $(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide(); 
        }      
      }); 
     }); 

コードが機能しているようです!アラートを削除すると、動作が停止します。何か案は????


ありがとうございました。私はjsfiddleを準備していて、いくつか一見無関係のプラグインを削除していました。私がintellitextツールのうちの1つを削除したとき、コードはすべてのブラウザで正常に動作するようになりました。私はテストを経て、コードをdocument.readyにプッシュバックすることさえできたので、私はそれに答えて、プラグインの互換性の問題/バグにそれをチョークするつもりだと思う。

ありがとうございました。

+2

jsFiddleに関連するHTMLまたは例を投稿できますか? – j08691

+0

こんにちはGordon、私はconsole.log( "This.length =" + $(this).length);にログラインを変更しました。出力はLOG:これでした。長さ= 1、期待される要素数。デバッガを見ると、オブジェクトは正しく初期化されているようです(名前、ID、期待値)。 – thenorthsider23

+0

@ thenorthsider23。下の私の答えをチェックしてください。 – gdoron

答えて

0

次のように使用しますか?

$(this).live ("change", function() { 
    //... 
}); 
+1

ドキュメントごと。 jQuery 1.7以降、.live()メソッドは推奨されていません。 .on()を使用してイベントハンドラをアタッチしてください。 – Rick

+0

oh!ありがとう。その部分を逃した。私のjQueryバージョンを更新する時間。 –

+2

さて、多くの人がそれを知っているようには見えません。 jQueryのドキュメントは、delegate()が出たときに1.4よりも.live()を使用するのをやめました。 –

0

私はあなたのHTMLサンプルとjQueryコードをテストしました。興味深いことに、2つのラジオ入力を使用しました。これらの2つの入力が同時に変更されたか、またはいずれかが他の入力の変更とトグルします。単純な値を1に変更すると、自動的にもう一方の値が0に変更されます。

if ($(this).val() == "1")も値が1に変更され、0が同様に変更されます。したがって、両方の変更が最初に表示されてから非表示になるため、イベントが発生していないように見えます。

0

console.log()行をコメントアウトするか削除します。スクリプトを実行しているときに開発者ツールが開いていない限り、IEはそれを抑制します。

関連する問題