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

您是否尝试在这样的表单下设置消息？

编辑：你可以使用它

$("#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 回答
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”属性的标签确实具有到输入控件的逻辑链接。您不必将输入放在点击功能的标签内。我猜你的JS问题是由这个结构引起的。

于 2013-09-15T10:06:45.237 回答