当您点击+按钮时,您会看到一个新选项。当你点击创建的新+按钮时它不起作用,为什么? http://jsfiddle.net/artworkjpm/6rmwzop1/
<div class ="chooseContainer">
<div class="questionDiv">
<label id="replace">Ask your question here:</label>
<br>
<textarea id="questionInput"></textarea>
<br>
<br>
<button id="save">Save</button>
<button id="refresh" style="display:none">Amend question</button>
</div>
<br>
<table class="options">
<tr>
<td><label class="labopt">Option 1</label></td>
</tr>
<tr>
<td><textarea class="opt" id="option1"></textarea></td>
<td><button type="button" class="plus btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
<button type="button" class="minus btn btn-default"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></td>
</tr>
</table>
<div class="resultContainer"> <br>
<button id="doThis">Decide</button>
<br>
<br>
<p style="font-weight:bold">You should: <span id="verdict"></span></p>
</div>
$(document).ready(function() {
//Write question
//Save question, replace over input
$("#save").on("click", function() {
//get value of question
var question = $("#questionInput").val();
//replace over label
$("#replace").text(question);
//hide input
$("#questionInput").hide();
//hide save button
$("#save").hide();
//show refresh button
$("#refresh").show();
//on click of refresh re-enable input field and save button
});
//Onclick of refresh button enable amend question
$("#refresh").on("click", function() {
$("#replace").text("Ask your question here:");
$("#questionInput").show();
$("#save").show();
$("#refresh").hide();
});
//Decide on number of answers
$(function() {
var counter = 1;
$('.plus').on("click", function(event) {
event.preventDefault();
counter++;
var firstRow = $('<tr><td><label class="labopt">Option' +' '+counter+'</label></td></tr>' +
'<tr><td><textarea class="opt" id="option1"></textarea></td>' +
'<td><button type="button" class="plus btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>'+
'<button type="button" class="minus btn btn-default"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></td>'+
'</tr>');
$('table.options').append(firstRow);
});
});
//delete an answer option
$('.minus').click(function(event) {
event.preventDefault();
$(this).destroy(firstRow);
});
//On click, get values of answers & choose random answer
$("#doThis").bind("click", function() {
var optionone = $("#option1").val();
var optiontwo = $("#option2").val();
var optionthree = $("#option3").val();
var optionfour = $("#option4").val();
var optionfive = $("#option5").val();
var arrayList = [optionone, optiontwo, optionthree,
optionfour, optionfive
];
var decide = arrayList[Math.floor(Math.random() *
arrayList.length)];
$("#verdict").text(decide);
}); // end of dothis click event
}); // end of ready
在js fiddle http://jsfiddle.net/artworkjpm/6rmwzop1/
上查看此内容会更容易