精华内容
下载资源
问答
  • jquery结合js实现向后台发送请求,给页面动态添加内容,并给动态添加的内容添加事件.html内容如下: <button class="btn btn-md customButton" id="add_red_envelope">添加红包&...

    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在该页面只能出现一次,否则在事件处理函数中就会产生问题

    展开全文
  • JS获取动态添加的元素

    万次阅读 2018-10-14 14:17:13
    在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: // 1. 在模板引擎里面添加行内事件 // 2. 利用事件的委托获取(常用) // 3. 在ajax的...

    在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法:

    // 1.  在模板引擎里面添加行内事件 
    // 2.  利用事件的委托获取(常用)
    // 3.  在ajax的监听响应完成函数后面获取
    

    一 在模板引擎里面添加行内事件

    添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素.

    <!-- 1.准备一个模板 -->
        <script id="tpl-table" type="text/html">
            {{ each rows value key }}
                <tr>
                    <td>
    					<button type="button" onclick="updateUser({{ value.id }} {{@ ','}} {{value.isDelete}})" id="btn-status" >按钮</button>
                    </td>
                </tr>
            {{ /each }}
        </script>
        
        //事件函数,书写在单独的JS文件中
        //带有参数,参数是模板传递过来的
        function updateUser (id,isDelete){
        	
        	//doSomething.........
        }
    

    上面使用的模板是art-template,在模板里面我们给button标签注册了点击事件onclick,但是事件函数却是一个带参数的函数.当点击这个按钮的时候,就会触发点击事件,进而调用updateUser()函数.

    二. 利用事件的委托获取(常用)

    事件的委托可以为动态添加的元素绑定事件.

    //同样以上面的代码为例,tr最后是添加到table中,那么将点击事件委托给table
    
    $('table').on('click','tr #btn-status',function(){
    	//doSomething........
    })
    

    上面的代码意思是,将点击事件绑定给table元素,但是我们点击的是table里面的button按钮,此时事件的冒泡起作用,向外冒泡遇到父元素table也有点击事件,那么就会去执行这个事件.

    三 在ajax的监听响应完成函数后面获取

    当我们把模板渲染出来的时候,此时页面上已经是最新的动态元素了,DOM也已经重绘完成,此时再去获取动态元素.

    $.ajax({
    	url : 'text.php',
    	dataType : 'json',
    	success : function(obj){
    		//渲染动态元素到页面上
    		var trHTML = template('tpl-table',obj);
    		$('table').append(trHTML);
    		
    		//获取动态元素注册点击事件
    		$('tr #btn-status').on('click',function(){
    			//doSomething........	
    		});
    	}
    })
    

    四 总结:

    第一种方法要注意事件函数必须是全局函数;第二种最常用,但是三者的共同点都是当页面已经渲染完毕后才能获取到动态元素.

    展开全文
  • js中如何给动态添加的input添加id属性 function CreateTable() { var table=$("<table class='tabled"+i+"'>"); table.appendTo($("#createtable")); var tr=$("<tr><td>标题:"+...
  • 获取动态添加的节点的ID

    千次阅读 2017-09-15 17:21:07
    目的:在网页设计的过程中,有时候我们需要获取动态添加的节点的id,从而设置相应的属性或者事件。方法:可以给动态添加的内容加上一个不显示的input,将其value设置为后台传过来的数据的某一个变量值。如:'&lt...

    目的:在网页设计的过程中,有时候我们需要获取动态添加的节点的id,从而设置相应的属性或者事件。

    方法可以给动态添加的内容加上一个不显示的input,将其value设置为后台传过来的数据的某一个变量值。

    如:'<input type="hidden" value="'+activity_id+'" name="activity_id" />'

    var li_str ='<li class="panel_content" id="activity'+activity_id+'">'+
                	'<input type="hidden" value="'+activity_id+'" name="activity_id" />'+
    	            '<div class="content">'+
    	                '<p class="p1"><strong >'+title+'</strong></p>'+
    	                '<a id="entry'+activity_id+'" class="entry" οnclick="handleEntryEvent(this)">进入</a>'+
    	            '</div>'+
    	            '<div class="content">'+
    	                '<p id="leftStatus'+activity_id+'" class="p1">'+info+'</p>'+
    	                '<a id="'+activity_id+'" class="entry" οnclick="handleEndedActivity(this)">'+activity_status+'</a>'+
    	            '</div>'+
    	            '<div class="content content1">'+
    	                '<p class="p1 font1">'+create_time+'</p>'+
    	                '<a class="entry" οnclick="set(this);" id="set'+activity_id+'">设置</a>'+
    	            '</div>'+
    	        '</li>';
    $("#ul_panel_content").append(li_str)

    activity_id是从后台发回来的数据,值形式为“1”或者“2”等等。

    现在我们用:<input type="hidden" value="'+activity_id+'" name="activity_id" />,

    目的:现在想要获取到这个节点的id,对其定义事件

     '<a id="entry'+activity_id+'" class="entry" οnclick="handleEntryEvent(this)">进入</a>'

    思路:通过获取到input的value,从而得到 activity_id,进而得到节点的id

    函数 handleEntryEvent(this)的js代码如下:这里的this是节点本身

          // 处理”进入“按钮事件
    	handleEntryEvent = function(node){
    		var parents = node.parentNode.parentNode;
    		var child = parents.children;
    		console.log(child);
    		var input_obj = child[0];
    		var activ_id = input_obj.value;  //注意这里写的是js,不是在jquery框架写的,所以用Input_obj.val(),提示,input_obj.val is not a function
    		var url =  globalConfig.pre_api_url + "/wall/index.php?activity_id=" + activ_id;
    		var entry_obj = $("#entry"+activ_id);
    		entry_obj.attr("target","_blank");
    		entry_obj.attr("href",url)
    	}
    通过 activ_id = input_obj.value 就可以得到activity_id的值了,从而得到点击节点的id:entry_obj = $("#entry"+activ_id)


    展开全文
  • unity给动态添加的物体添加材质、贴图? 1、unity的Asset文件夹下新建文件夹Resources,在Resources下创建文件夹Textures。把texture.png文件放入文件夹Textures下. // 添加贴图 法1 // 法1的坑:Resources.Load()...
    1. 添加贴图

    unity的Asset文件夹下新建文件夹Resources,在Resources下创建文件夹Textures。把texture.png文件放入文件夹Textures下.

    // 方法1:
    // 注意:Resources.Load()只能在Resources文件夹下读取,别的不行,所以该路径名默认在Asset/Resources下,且texture不要加文件后缀
    this.gameObject.GetComponent<MeshRenderer>().Material.mainTexture=(Texture)(Resources.Load("Textures/texture"));
    
    // 方法2:
    this.gameObject.GetComponent<MeshRenderer>().material.mainTexture = new WWW("file://C:\\Users\\Desktop\\ProceduralGrid\\Assets\\Resources\\Textures\\texture.png").texture;
    
    1. 添加材质

    在文件夹ResourcesResources下创建文件夹Materials。把材质球文件cubeMat放入文件夹Materials下.

    材质球文件建立:
    Materials文件夹右键->Create->Material产生名称格式为New Material的材质,重命名cubeMat。

    // 添加材质
    GameObject.Find("game").GetComponent<MeshRenderer>().material = Resources.Load<Material>("Materials/cubeMat");
    

    3.给材质的shader赋贴图

    // 找到材质的shader
    GameObject.Find("game").GetComponent<MeshRenderer>().material.shader = Shader.Find("Custom/MixedTexturesHalfLambert");
    // 设置由shader属性表示的材质面板上的贴图,"_MainTexture"是shader属性名
    GameObject.Find("game").GetComponent<MeshRenderer>().material.SetTexture("_MainTexture", (Texture)Resources.Load("Textures/TerrainRock"));
                    
    
    展开全文
  • JQuery实现动态添加的标签元素的点击事件

    万次阅读 多人点赞 2018-05-09 17:09:15
    这里所说的动态添加的元素的意思是:用js添加的标签元素 先说一下我遇到的问题: 想对一些数据实现分页,就自己写一个分页功能。用的是bootstrap的分页,在页面获取数据列表后,计算出需要分多少页展示,然后用js...
  • jQuery给动态添加的标签添加点击事件 //html <div id="myContent"></div> //jQuery var str = "<button class='btn'>按钮</button>" $("#myContent").html(str); //不能直接使用.click()...
  • 动态添加的元素添加点击事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js事件监听</title> <style> ul{ list-style: none; ....
  • jquery获取动态添加的标签对象

    千次阅读 2017-12-02 20:45:27
    jquery无法直接给网页里面动态添加点击事件,并且...一般来说,js获取动态添加的组件都是自定义给标签添加上onclick属性来达到调用,这是普通的方法,如下:onclick方式获取 <!DOCTYPE html> <title>Title <bo
  • jquery删除动态添加的元素

    千次阅读 2018-06-19 16:22:42
    1、这是动态添加的htmlvar i = 1; $(".addBtn").click(function(){ $(".box").append('&lt;div class="boxMain"&gt;&lt;img src="img1.png" /&gt;&...
  • 由于项目要搬家,某些地方还是一样的,但是UI用的不一样,在做动态添加的时候遇到一个问题,累加的时候明明代码都是一样一样的啊!怎么后面加出来的没有样式了哩,折腾了一下午,发现原来就是一个小问题。 所以进行...
  • 原生js 给动态添加的元素绑定事件的可能应用场景:在创建一个元素之后,需要给它绑定事件,这时候要用到事件委托。jQuery现在很少用了,就不说了,现在来说一下原生js的写法: let tag = `&lt;div class="...
  • 遇到问题: 当我获取 $("...在网上查阅资料后发现动态添加的标签要事件委托才能获取到节点,也就是说要用: $(selector).on(events,[selector],[data],fn) 属性解析: 参数 描述 even...
  • 现在有父布局LinearLayout id为payItemts 有子布局LinearLayout id为payItem 子布局payItem中包含一个id为...如果直接在onCreate方法中获取Spinner,那么动态添加的Spinner就无法获取到了 请问该怎么解决啊
  • JQuery给动态添加的元素绑定事件

    千次阅读 2017-09-08 21:47:32
    jquery中绑定事件一般使用bind、on或者click,但是这只能是对已经加载好(HTML中创建...这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如: $(".Lis
  • jquery给动态添加的元素绑定事件

    千次阅读 2018-03-06 17:19:47
    这里介绍jQuery中如何给动态添加的元素绑定事件;在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:例如:&lt;div id="testdiv"&gt;&lt;ul&gt;&lt;/u...
  • ``` var html = "<ul class='tree'>...</ul>" $("#id").html(html); ...结果动态添加的ul元素并没有相应的效果,即class="tree"没有起作用,只有浏览器最初始的ul效果,这该怎么办呢?求大神解救啊!
  • 在LinearLayout中动态添加的checkbox之间的间距
  • 问题描述:前端开发中常常会遇到JQ需要给当前部分动态创建、添加元素或者相应HTML代码的情况,我们会给当前部分设置click等事件达到动态效果或者功能实现,但是会发现动态添加的部分失去了相应事件效果。 原因:...
  • 第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的   第二种情况, 才可以把js动态添加的表单元素提交到服务器端   总结:要保证...
  • 给Jquery动态添加的元素绑定事件

    千次阅读 2016-11-28 10:02:40
    给Jquery动态添加的元素绑定事件 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是 在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不...
  • 其中我在table里有laydate元素,动态添加的laydate不弹出日期选择,根据class渲染的时候会出现出了第一个可以正常显示,别的都闪退的情况。 最终是在每次添加的时候都对新添加的元素进行ID重新渲染才解决的。 为了...
  • js给动态添加的元素添加属性

    千次阅读 2019-02-18 09:57:56
    将一段标签动态添加到div中,给这段标签的img标签设置width:100% 一开始设置了添加类名 // 内容 const content = res.data.data.info.content; document.getElementById('content').innerHTML = content; var a ...
  • 在项目中第一次写动态添加的时候,遇到了一个问题,就是添加的标签,之前绑定的同class事件都失效了,查资料后发现,是绑定事件使用的方法不对,下面说一下。 首先是失效情况 $('.btn').click(function() { alert...
  • 现在有一个class为blessingLanguageSignature的html标签,它是动态添加的,我想给它加一个点击事件,一开始是这样写的: $('.blessingLanguageSignature').click(function(){}); 但是死活不行。 正确的写法: $...
  • 动态添加的元素没有办法渲染layui.upload.render(); 分析: 1、页面在选择前,JS里的layui.upload.render()已经执行了 2、layui.upload.render()执行但是并找不到#file_choose元素,因为页面还...
  • 这时点击1,2,3还是能触发点击事件,但是点击动态添加的4,5节点时却无反应。 此时代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ...
  • ``` <!DOCTYPE html> <title></title> *{ margin:0; padding:0; } .img{ width:100px;...**html中的input file change 执行,但是动态添加的input change不执行**
  • es6 为动态添加的元素添加事件

    千次阅读 2017-12-28 17:45:52
    做商品属性的时候,需要动态添加商品属性,但是在添加啦输入框后再点击删除按钮删除不了,开始是这样写的: $('#panel-product-property .property-remove').each( (_index, element) => $(element).on('click', ()...
  • 说明:当前情况下,JavaScript动态添加的表单元素是不能提交到服务器端   第二种情况: 说明:这样情况下可以把js动态添加的表单元素提交到服务器   备注:在IE下,form表单放在table内,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,552
精华内容 25,020
关键字:

动态添加的