jquery结合js实现动态添加内容，并给动态添加的内容添加事件-蒲公英云

jquery结合js实现向后台发送请求，给页面动态添加内容，并给动态添加的内容添加事件

.html内容如下：

<button class="btn btn-md customButton" id="add_red_envelope">添加红包</button>
            <div >
                <label>其他推荐(可选):</label>
                <ul id="recommendTime">
                </ul>
            </div>
            <br />
            <div>
                <label>可发红包数:</label>
                <ul id="RedBagMaxNum">
                </ul>
            </div>

目的：前端点击button，向后台请求数据，动态添加到两个ul里面

jquery代码：

$("#add_red_envelope").click(function(){
    var url = globalConfig.pre_api_url +"/wxwall_api/redbag/check_redbag.php";
        var hour = $('#startHour option:selected').val();
        var minute = $('#startMinute option:selected').val();
        var date = new Date();
        var seperator = "-";
        var year =  date.getFullYear();     //获取年份
        var month = date.getMonth() + 1;    //月份是从0-11，所以获得月份后要加1才是当前的月份
        var strDate = date.getDate();       //日期
        var currentDate  = '';
        var start_time = '';
        var data = {};
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        currentDate = year + seperator + month + seperator + strDate;
        // 显示日期输入框的值
        $("#currentDate").val(currentDate);
        start_time = currentDate + ' ' + hour + ':' + minute;
        data = {
            "start_time":start_time,
        };
        //请求初始化数据
        request(url,data,function(res){
            var selected_data = res.data.selected_data;
            var recomm_datas = res.data.recomm_datas;
            var len = recomm_datas.length;
            var recommendTimes = [];
            var recommendNums = [];
            // 添加推荐时间和可发红包数
             for(var i=0;i<len;i++){
                var dateAndTime = recomm_datas[i].recomm_time.trim().split(" ");
                var recommTimeList = '<li class="other_recommend" οnclick="chooseTime(this);" id="'+i+'">' + dateAndTime[1] + '</li>';
                var M_redbag_left = recomm_datas[i].M_redbag_left;
                var M_n = recomm_datas[i].M_n;
                var redBagLeftList = '<li class="number" id="num'+i+'">' + M_n + '</li>';
                $("#recommendTime").append(recommTimeList);
                    $("#RedBagMaxNum").append(redBagLeftList);
            }
            $('#leftRedBag').text(selected_data.M_redbag_left);
            // 显示表单form和footer
        $("form").css("display","block");
        $("footer").css("display","block");
        });        
});

动态添加的内容如for循环语句里面所示。

动态添加内容效果如下：

Center

功能：每次向后台请求到的数据长度不一样，即Li个数不一样。给第一个ul中的每个li定义点击事件，选中该Li就改变样式

同时改变另一ul对应的li样式，效果如下：

Center 1

js实现该功能：

1、给第一个ul中的每一个li定义点击事件：οnclick=”chooseTime(this)”,this传的是节点本身；同时定义id，id就用for中的i对应（考虑要改变另一个ul中对应的li的样式）

//请求初始化数据
        request(url,data,function(res){
            var selected_data = res.data.selected_data;
            var recomm_datas = res.data.recomm_datas;
            var len = recomm_datas.length;
            var recommendTimes = [];
            var recommendNums = [];
            // 添加推荐时间和可发红包数
             for(var i=0;i<len;i++){
                var dateAndTime = recomm_datas[i].recomm_time.trim().split(" ");
                var recommTimeList = '<li class="other_recommend" οnclick="chooseTime(this);" id="'+i+'">' + dateAndTime[1] + '</li>';
                var M_redbag_left = recomm_datas[i].M_redbag_left;
                var M_n = recomm_datas[i].M_n;
                var redBagLeftList = '<li class="number" id="num'+i+'">' + M_n + '</li>';
                $("#recommendTime").append(recommTimeList);
                    $("#RedBagMaxNum").append(redBagLeftList);
            }
            $('#leftRedBag').text(selected_data.M_redbag_left);
            // 显示表单form和footer
        $("form").css("display","block");
        $("footer").css("display","block");
        });

2、定义函数：chooseTime(node)

chooseTime = function(node) {
        nodeId = node.id; 
        if(flag == 0){
            // 页面渲染完成，首次点击推荐时间,不需要判断节点是否有选中属性
            flag = 1;                           // 用于解决页面初始化完成时lastSelectedTimeNode为空，不会具有属性的问题                       
            //node.addClass('active1');         //      ？？？为什么这个总是提示出错呢
            $('#'+ nodeId).addClass('active1');
            $('#num'+ nodeId).addClass('active2');
            lastSelectedTimeNode = nodeId;       //保存该节点，用于下次点击事件用
        }else{
            // 不是首次点击
            if( $('#'+nodeId).hasClass('active1') ){
                lastSelectedTimeNode = nodeId; 
            }else{
                //修改node和lastSelectedTimeNode的颜色
                $('#'+lastSelectedTimeNode).removeClass('active1');
                $('#num'+lastSelectedTimeNode).removeClass('active2');
                $('#'+nodeId).addClass('active1');
                $('#num'+ nodeId).addClass('active2');
                //再把node赋值给lastSelectedTimeNode
                lastSelectedTimeNode = nodeId;
            }
        }
}