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循环语句里面所示。

动态添加内容效果如下：

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

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

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

如上面代码所示：页面首次渲染完成，首次点击推荐时间,不需要判断节点是否有选中属性，直接给选中li添加样式，同时保存   当前点击li的id，用于下次点击事件； 不是首次点击，如果当前点击和上次点击是同一个li就不需要做处理；否则 去掉上次的li添加的样式，给当前li 添加样式，并保存当前li的id

注意：在给页面动态添加内容节点之前，要将其父节点下的子节点移除掉，否则会产生意外的问题，比如给动态添加的某个节点赋予事件，而该节点又有id，那么当在页面不刷新的情况下，执行多次该代码，就会产生执行该节点的事件函数，但是并没有达到想要的效果。

原因：在不刷新界面的前提下，当多次添加同样的节点给当前界面，如果给某节点赋予id，那么body里面就会拥有多个相同id的节点，而在htnl里面每个节点都只能有一个id，且这个id在该页面只能出现一次，否则在事件处理函数中就会产生问题