Question

我想使用单选按钮来控制页面的布局。按钮看起来像这样：

<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这样的工具仍然可以在每个单选按钮上看到正确的事件处理程序，并触发它们
message-area中添加的HTML标记越多，下面的单选按钮就越多，无法点击
感觉就像插入这些元素在某种程度上“分流”页面上的内容
而不是使用JQuery插入我尝试getElementById和innerHTML的元素，但似乎没有区别

你能否了解这里发生的事情？在事件处理程序绑定后，我是否应该能够在页面上进一步插入HTML？有什么安全可靠的方法呢？

修改

事实证明，文本的插入在单选按钮上分流了一个流氓的，不可见的SVG画布（参见JSFiddle）。我发现这是因为我在标记中发现了它，这需要很长时间，因为页面上有许多元素。找到它后我显然可以解决它，但我想知道，是否有一个工具可以使这个可见或帮助调试这个？

Answer 1

您是否尝试将消息设置为这样的表单？

编辑：您可以使用

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

OR：

 $("#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>

Answer 2

<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问题是由这种结构造成的。

用于发现隐藏的SVG画布遮挡其他页面元素的工具

2 个答案: