单击按钮后附加内容
[英]Appending content upon button click
问题描述
每当我尝试运行此提琴时，都会收到参考错误。
该功能应该添加另一个单选按钮以形成表单。
任何帮助都会很棒。
谢谢
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>');
};
1 个解决方案
解决方案1
4 已采纳 2016-12-21 16:14:52
这是因为您的小提琴设置不正确。 使用on*事件属性时，该函数必须在window范围内，因此您需要将JS设置中的“加载类型”从onLoad更改为No Wrap - in <head> 。
请注意，完全更好的解决方案是完全不使用任何过时的事件属性，而用不引人注目的事件处理程序替换它们。 由于现在完全断开了HTML和JS的连接，因此可以更好地分离关注点。 由于您已经在使用jQuery，因此可以执行以下操作：
$(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>'); }); });
<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>
单击时删除按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.