Javascript 播放-为什么“删除”按钮不能正常工作?

Javascript 播放-为什么“删除”按钮不能正常工作?,javascript,java,jquery,html,playframework-2.0,Javascript,Java,Jquery,Html,Playframework 2.0,我的页面中有一个数据列表。我可以通过单击“添加”按钮来添加文本字段以获取新数据。但是如果我想删除任何数据,我必须单击文本字段旁边的删除按钮 数据添加成功。但当我想删除任何数据/文本字段时,在单击“删除”按钮后,“删除”按钮将作为“提交”按钮工作,并且“删除”不起作用 这是我的控制器: @ExternalRestrictions("Edit Poll") public static void editPoll(Long id){ PollDefinat

我的页面中有一个数据列表。我可以通过单击“添加”按钮来添加文本字段以获取新数据。但是如果我想删除任何数据,我必须单击文本字段旁边的删除按钮

数据添加成功。但当我想删除任何数据/文本字段时,在单击“删除”按钮后,“删除”按钮将作为“提交”按钮工作,并且“删除”不起作用

这是我的控制器:

  @ExternalRestrictions("Edit Poll")
        public static void editPoll(Long id){

            PollDefination poll = PollDefination.findById(id);

            flash("poll", "" + poll.id);

            Logger.info("id: " + poll.id);

            List<String> pollQuestionOption2 = PollQuestionOption.find("SELECT options from PollQuestionOption WHERE poll_id = ? ", poll.id).fetch();


            List<String> pollQuestionOption = PollQuestionOption.find("poll_id = ?", poll.id).fetch();

            int j=0;
            List<String>  optionitem = new ArrayList<String>();
            for(int i=0 ; i< pollQuestionOption2.size() ; i++){
                //Logger.info("data: "+pollQuestionOption2.get(i) +" " );

            optionitem.addAll(Arrays.asList(pollQuestionOption2.get(i).split(",")));

            }

            List<String> questionType = new ArrayList<String>();
            questionType.add(0,"Single Select");
            questionType.add(1,"Multiple Select");
            render(questionType,poll,pollQuestionOption,optionitem);
        }
以下是我的html部分:

  <div class="form-group">
                                        <label for="inputEmail3" class="col-sm-2 control-label">Options</label>
                                        <div class="col-md-10">
                                            <button type="button" class="btn btn-danger" id="addButton">ADD OPTION</button>
                                        </div>
                                    </div>

                                      #{list items: optionitem, as:'optionitem'}
                                  <div class="form-group"  id="optiondiv">

                                    <div class="col-md-5">
                                      <div class="input-group">

                                        <input name="optionitem" type="text" class="form-control" id="optionitem" value="${optionitem}" placeholder="Option">

                                        <span class="input-group-btn">
                                             <button href="#" class="removeOption" type="button">
                                              <i class="fa fa-times fa-2x text-danger" style="font-size: 18px" aria-hidden="true"></i>
                                             </button>
                                        </span>
                                      </div>
                                    </div>
                                  </div>

                                #{/list} 

                                 <div class="form-group">
                                  <div class="addField">

                                    <div class="col-md-5">

                                    </div>
                                  </div>
                                </div>
这是我的jquery部分:

 $(document).ready(function() {


 // $(".output").val(1) ;

  var wrapper = $(".addField"); //Fields wrapper
  var add_button = $("#addButton"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    $("#pollQuestionOption.options").val('');
    x++;
    $(wrapper).append(
      '<div class="input-group">' +
      '<input name="pollQuestionOption.options" type="text" class="form-control" id="pollQuestionOption.options" value="${pollQuestionOption.options}" placeholder="Option">' +
      '<span class="input-group-btn">' +
      '&nbsp;&nbsp;' +
      '<button href="#" class="removeOption" type="button">' +
      '<i class="fa fa-times fa-2x text-danger" style="font-size: 18px" aria-hidden="true"></i>' +
      '</button>' +
      '</span>' +
      '</div>');

          var currentVal = parseInt($(".output").val());
        if (!isNaN(currentVal)) {
            $(".output").val(currentVal + 1);
            console.log("value+: " + $(".output").val());

            }

  });

  $(wrapper).on("click", ".removeOption", function(e) { 
    e.preventDefault();
     $(this).parent('div').remove(); 
    $(this).closest('div.col-md-5').prev().remove();
    $(this).closest('div.col-md-5').remove();

    x--;

    var currentVal = parseInt($(".output").val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $(".output").val(currentVal - 1);
            console.log("value+: " + $(".output").val());
        }

  });



});
为什么。removeOption不能正常工作