私は現在、多くの問題を引き起こしている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>
編集 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 を準備し、一見無関係なプラグインをいくつか削除していました。それらの 1 つである intellitext ツールを削除すると、コードはすべてのブラウザーで問題なく動作するようになりました。私はテストを経て、コードを document.ready にプッシュすることさえできたので、回答済みとしてマークし、プラグインの互換性の問題/バグに分類しようと思います。
みんなありがとう