jquery结合js实现动态添加内容，并给动态添加的内容添加事件

客官°小女子只卖身不卖艺 2022-06-08 01:57 214阅读 0赞

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

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

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

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

[Center]: /images/20220608/689c0a7f2b394bd58bd609d2cb1eb5be.png
[Center 1]: /images/20220608/f5edb02d406e45b997997658d9eca6e0.png