我的页面中有一个数据列表。我可以通过单击“添加”按钮添加文本字段以获取新数据。但是,如果我想删除任何数据,我必须单击文本字段旁边的删除按钮。
成功添加数据。但是当我想删除任何数据/文本字段时,单击删除按钮后,删除按钮工作作为提交按钮并删除不起作用。
这是我的控制器:
@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">' +
' ' +
'<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不能正常工作?