1.绑定事件的函数
$("#id").on(events[,selector][,data],handler) //从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,
//用于统一取代以前的bind()、 delegate()、 live()等事件函数。
//要删除通过on()绑定的事件,请使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数
详细的可以看
这里:http://www.365mini.com/page/jquery-on.htm
2.静态的绑定事件
$("#id").on("click",function(){
...
})
3.动态的绑定事件,因为是动态生成的,可以添加和删除,所以事件很难绑定到之前不存在的元素上去。这里可以通过selector参数来指定哪些元素被绑定了事件,而绑定的元素可以是已经存在了的selector的祖先元素
$("#ancestors").on("click","span[class='del']",function(){ //给绑定元素下的class为del的span元素绑定点击事件
。。。。
})
4.完成如下图的功能:
可以动态添加和删除,但是奖项的名称都要有相应的改变
jsp代码
<h1>设置奖项</h1>
<div class="active-info-2">
<div class="prize">
<span class="name">
<input type="text" class="award-name" name="listAward[0].gradeName" value="一等奖" readonly style="border:1px;border-bottom-style:none;border-top-style:none;border-left-style:none;border-right-style:none;">
<input type="text" class="input-num" name="listAward[0].name" value="一等奖"/>
</span>
<span class="num">数量<input type="text" class="input-num" name="listAward[0].totalnum" value="1"/>个 </span>
<span>奖品类型<select class="award-type" name="listAward[0].type"><option value="1">虚拟</option><option value="2">实物</option></select></span>
</div>
<div>
<span class="name-error-message" style="color:red"></span>
<span class="num-error-message" style="color:red"></span>
</div>
<div class="prize">
<span class="name">
<input type="text" class="award-name" name="listAward[1].gradeName" value="二等奖" readonly style="border:1px;border-bottom-style:none;border-top-style:none;border-left-style:none;border-right-style:none;">
<input type="text" class="input-num" name="listAward[1].name" value="二等奖"/>
</span>
<span class="num">数量<input type="text" class="input-num" name="listAward[1].totalnum" value="1"/>个 </span>
<span class="type">奖品类型<select class="award-type" name="listAward[1].type"><option value="1">虚拟</option><option value="2">实物</option></select></span>
<%--<span class="probability">概率<input type="text" class="input-num" name="listAward[1].probability" value="1"/>%</span>--%>
</div>
<div>
<span class="name-error-message" style="color:red"></span>
<span class="num-error-message" style="color:red"></span>
</div>
<div class="prize">
<span class="name">
<input type="text" class="award-name" name="listAward[2].gradeName" value="三等奖" readonly style="border:1px;border-bottom-style:none;border-top-style:none;border-left-style:none;border-right-style:none;">
<input type="text" class="input-num" name="listAward[2].name" value="三等奖"/>
</span>
<span class="num">数量<input type="text" class="input-num" name="listAward[2].totalnum" value="1"/>个 </span>
<span>奖品类型<select class="award-type" name="listAward[2].type"><option value="1">虚拟</option><option value="2">实物</option></select></span>
<%--<span class="probability">概率<input type="text" class="input-num" name="listAward[2].probability" value="1"/>%</span>--%>
</div>
<div>
<span class="name-error-message" style="color:red"></span>
<span class="num-error-message" style="color:red"></span>
</div>
<div class="addmoreprize">+添加更多奖项</div>
</div>
相关的js代码
//添加奖项,最多8个
var totalLength = $(".prize").length;
$(".addmoreprize").click(function () {
totalLength++;
var grade_name = "";
var htmlStr = "";
if(totalLength == 4){
grade_name = "四等奖";
htmlStr = getHtml(totalLength,grade_name);
}
if(totalLength == 5){
grade_name = "五等奖";
htmlStr = getHtml(totalLength,grade_name);
}
if(totalLength == 6){
grade_name = "六等奖";
htmlStr = getHtml(totalLength,grade_name);
}
if(totalLength == 7){
grade_name = "七等奖";
htmlStr = getHtml(totalLength,grade_name);
}
if(totalLength == 8){
grade_name = "八等奖";
htmlStr = getHtml(totalLength,grade_name);
}
if(totalLength >=9){
utils.modal.alert("最多可以添加八个奖项");
}
$(".addmoreprize").before(htmlStr);
});
//动态删除奖项
$(".active-info-2").on("click","span[class='del']",function(){
$(this).parent("div[class='prize']").remove();
totalLength--;//奖项数量
$(".prize").each(function(i){
if(i>2){//从第三个开始更新
$(this).children("span[class='name']").children("input:eq(0)").val(getNum(i) +"等奖");
$(this).children("span[class='name']").children("input:eq(1)").val(getNum(i) +"等奖");
$(this).children("span[class='name']").children("input:eq(0)").attr("name","listAward["+i+"].gradeName");
$(this).children("span[class='name']").children("input:eq(1)").attr("name","listAward["+i+"].name");
$(this).children("span[class='num']").children("input:eq(0)").attr("name","listAward["+i+"].totalnum");
$(this).children("span[class='type']").children(".award-type").attr("name","listAward["+i+"].type");
}
});
});
function getHtml(num,grade_name){
var htmlstr = ' <div class="prize"> ' +
'<span class="name"> ' +
'<input type="text" class="award-name" name="listAward['+(num-1)+'].gradeName" value="'+grade_name+'" readonly style="border:1px;border-bottom-style:none;border-top-style:none;border-left-style:none;border-right-style:none;"> ' +
'<input type="text" class="input-num" name="listAward['+(num-1)+'].name" value="'+grade_name+'"/> ' +
'</span> ' +
'<span class="num">数量<input type="text" class="input-num" name="listAward['+(num-1)+'].totalnum" value="1"/>个 </span> ' +
'<span class="type">奖品类型<select class="award-type" name="listAward['+(num-1)+'].type"><option value="1">虚拟</option><option value="2">实物</option></select></span> ' +
//'<span class="probability">概率<input type="text" class="input-num" name="listAward['+(num-1)+'].probability" value="1"/>%</span> ' +
'<span class="del">删除</span>' +
'</div> ' +
'<div> ' +
'<span class="name-error-message" style="color:red"></span> ' +
'<span class="num-error-message" style="color:red"></span> ' +
//'<span class="probability-error-message" style="color:red"></span> ' +
'</div>';
return htmlstr;
};