Question

每次尝试运行这个小提琴时，我都会收到引用错误。

该功能应该添加另一个单选按钮来形成。

任何帮助都会很棒。

由于

https://jsfiddle.net/RyeManship/2jtvjd28/

HTML

    <section class="content">
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    <input type="text" class="form-control" placeholder="Type Question Here">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    <input type="text" class="form-control" placeholder="Type Question Here">
  </label>
</div>
</section>
<div class="row">
  <button type="button" class="btn btn-success" onclick="javascript:AddQuestion()">Add</button>
  <button type="button" class="btn btn-danger">Remove</button>
  <button type="button" class="btn btn-info">Submit Question</button>
</div>

的Javascript

function AddQuestion() {
$(".content").append('<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked><input type="text" class="form-control" placeholder="Type Question Here"></label></div>');
};

Answer 1

这是因为你的小提琴设置不正确。使用on*事件属性时，该功能必须在window的范围内，因此您需要更改“加载类型”。在从onLoad到No Wrap - in <head>的JS设置中。

Fixed fiddle

请注意，完全更好的解决方案是根本不使用任何过时的事件属性，并用不显眼的事件处理程序替换它们。由于HTML和JS现在完全断开连接，因此可以更好地分离关注点。正如您已经在使用jQuery，以下是如何做到这一点：

＆＃13;

$(function() {
  $('.add').click(function() {
    $(".content").append('<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked><input type="text" class="form-control" placeholder="Type Question Here"></label></div>');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class="content">
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      <input type="text" class="form-control" placeholder="Type Question Here">
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      <input type="text" class="form-control" placeholder="Type Question Here">
    </label>
  </div>
</section>
<div class="row">
  <button type="button" class="btn btn-success add">Add</button>
  <button type="button" class="btn btn-danger">Remove</button>
  <button type="button" class="btn btn-info">Submit Question</button>
</div>

＆＃13;

按钮点击后添加内容

1 个答案: