【jquery on】动态标签绑定事件 以及动态删除的参数的变化

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;
    };