0

ラジオ ボタンを使用してページのレイアウトを制御したいと考えています。ボタンは次のようになります。

<form>
  <label>
    <input type="radio" name="layout" class='layout-controls' data-type='layout' data-value='one'>
    One
  </label>
  <label>
    <input type="radio" name="layout" class='layout-controls' data-type='layout' data-value='two'>
    Two
  </label>
</form>

そして、私は次のような関数をバインドしています:

$('.layout-controls').on('click', function(event) {
  var $btn;
  $btn = $(event.target);
  return doStuff($btn.data('type'), $btn.data('value'));
});

これはすべてうまくいきます。

次に、イベント ハンドラーがバインドされた後、ページの上部に要素を追加しようとしています。

$("#message-area").html("<div><br><br><p>Please make a selection </p></div>")

これにより、ラジオ ボタンがクリックできなくなります。いくつかの観察：

  • Visual Eventのようなツールは、各ラジオ ボタンで正しいイベント ハンドラーを認識し、それらをトリガーすることができます。
  • HTML タグが追加されるmessage-areaほど、下のラジオ ボタンがクリックできなくなります。
  • これらの要素を挿入することは、ページの下に何かを「迂回」しているように感じます
  • JQueryを使用して要素を挿入するのではなく、試しgetElementByIdてinnerHTMLみましたが、違いはないようです

ここで何が起こっているのか、何か光を当てることができますか? イベント ハンドラーがバインドされた後、ページのさらに上に HTML を挿入できるようにする必要がありますか? これを行うための安全で堅牢な方法は何ですか?

編集

そのため、テキストの挿入によって、不正で目に見えない SVG キャンバスがラジオ ボタンの上に配置されていたことがわかりました ( JSFiddleを参照)。これを見つけたのは、ページに多くの要素があるために時間がかかったマークアップで見つけたからです。それを見つけたので、明らかに修正できますが、これを表示したり、デバッグに役立つツールはあるのでしょうか?

4

2 に答える 2

0 
<form>
    <input id="input1" type="radio1" name="layout" class="layout-controls" data-type="layout" data-value="one">
    <label for="input1">One</label>
    <input id="input2" type="radio2" name="layout" class="layout-controls" data-type="layout" data-value="two">
    <label for="input2">Two</label>
</form>

入力に ​​ID を追加し、ラベルに for-attributes を設定します。label タグ内に入力コントロールを配置しないでください。未検証。

「for」属性を持つラベルには、入力コントロールへのロジック リンクがあります。クリック機能のラベル内に入力を配置する必要はありません。あなたのJSの問題はこの構造が原因だと思います。

于 2013-09-15T10:06:45.237 に答える
0

このようなフォームの下にメッセージを設定しようとしましたか?

編集：それを使用できます

$("#message-area").html("<div><br><br><p>Please make a selection </p></div>");

また：

 $("#message-area").html("<div><br><br><p>Please make a selection </p></div>");

<form>
  <label>
    <input type="radio" name="layout" class='layout-controls' data-type='layout' data-value='one'>
    One
  </label>
  <label>
    <input type="radio" name="layout" class='layout-controls' data-type='layout' data-value='two'>
    Two
  </label>
</form>
<div id="message-area"></div>
于 2013-09-15T09:47:20.823 に答える