播放 - 为什么删除按钮无法正常工作?

时间:2017-03-19 08:51:29

标签: javascript java jquery html playframework-2.0

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

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

This is the actual look

这是我的控制器:

  @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不能正常工作?

0 个答案:

没有答案