單擊按鈕后附加內容
[英]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.