在此单击不适用于+按钮

时间:2015-04-28 11:40:16

标签: javascript jquery append this

当您点击+按钮时,您会看到一个新选项。当你点击创建的新+按钮时它不起作用,为什么? 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/

上查看此内容会更容易

0 个答案:

没有答案