-
jquery结合js实现动态添加内容,并给动态添加的内容添加事件
2017-09-11 16:46:49jquery结合js实现向后台发送请求,给页面动态添加内容,并给动态添加的内容添加事件.html内容如下: <button class="btn btn-md customButton" id="add_red_envelope">添加红包&...jquery结合js实现向后台发送请求,给页面动态添加内容,并给动态添加的内容添加事件
.html内容如下:
目的:前端点击button,向后台请求数据,动态添加到两个ul里面<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>
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)
如上面代码所示:页面首次渲染完成,首次点击推荐时间,不需要判断节点是否有选中属性,直接给选中li添加样式,同时保存 当前点击li的id,用于下次点击事件; 不是首次点击,如果当前点击和上次点击是同一个li就不需要做处理;否则 去掉上次的li添加的样式,给当前li 添加样式,并保存当前li的idchooseTime = 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; } } }
注意:在给页面动态添加内容节点之前,要将其父节点下的子节点移除掉,否则会产生意外的问题,比如给动态添加的某个节点赋予事件,而该节点又有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属性
2020-03-23 15:38:19js中如何给动态添加的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设置为后台传过来的数据的某一个变量值。如:'<...目的:在网页设计的过程中,有时候我们需要获取动态添加的节点的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是节点本身
通过 activ_id = input_obj.value 就可以得到activity_id的值了,从而得到点击节点的id:entry_obj = $("#entry"+activ_id)// 处理”进入“按钮事件 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) }
-
unity 代码给动态添加的物体添加贴图?
2018-12-10 13:14:54unity给动态添加的物体添加材质、贴图? 1、unity的Asset文件夹下新建文件夹Resources,在Resources下创建文件夹Textures。把texture.png文件放入文件夹Textures下. // 添加贴图 法1 // 法1的坑:Resources.Load()...- 添加贴图
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;
- 添加材质
在文件夹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给动态添加的标签添加点击事件
2019-04-07 21:16:35jQuery给动态添加的标签添加点击事件 //html <div id="myContent"></div> //jQuery var str = "<button class='btn'>按钮</button>" $("#myContent").html(str); //不能直接使用.click()... -
原生js 给动态添加的元素添加(事件监听器)
2019-12-28 14:09:10给动态添加的元素添加点击事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js事件监听</title> <style> ul{ list-style: none; .... -
jquery获取动态添加的标签对象
2017-12-02 20:45:27jquery无法直接给网页里面动态添加点击事件,并且...一般来说,js获取动态添加的组件都是自定义给标签添加上onclick属性来达到调用,这是普通的方法,如下:onclick方式获取 <!DOCTYPE html> <title>Title <bo -
jquery删除动态添加的元素
2018-06-19 16:22:421、这是动态添加的htmlvar i = 1; $(".addBtn").click(function(){ $(".box").append('<div class="boxMain"><img src="img1.png" />&... -
EasyUI 关于js动态添加的时候样式失效的问题
2016-04-28 18:43:55由于项目要搬家,某些地方还是一样的,但是UI用的不一样,在做动态添加的时候遇到一个问题,累加的时候明明代码都是一样一样的啊!怎么后面加出来的没有样式了哩,折腾了一下午,发现原来就是一个小问题。 所以进行... -
原生js javascript 给动态添加的元素绑定事件
2018-08-14 14:38:04原生js 给动态添加的元素绑定事件的可能应用场景:在创建一个元素之后,需要给它绑定事件,这时候要用到事件委托。jQuery现在很少用了,就不说了,现在来说一下原生js的写法: let tag = `<div class="... -
关于jQuery获取不到动态添加的元素节点的问题
2018-12-09 11:12:28遇到问题: 当我获取 $("...在网上查阅资料后发现动态添加的标签要事件委托才能获取到节点,也就是说要用: $(selector).on(events,[selector],[data],fn) 属性解析: 参数 描述 even... -
如何获取布局中动态添加的spinner的内容?
2015-12-06 09:33:03现在有父布局LinearLayout id为payItemts 有子布局LinearLayout id为payItem 子布局payItem中包含一个id为...如果直接在onCreate方法中获取Spinner,那么动态添加的Spinner就无法获取到了 请问该怎么解决啊 -
JQuery给动态添加的元素绑定事件
2017-09-08 21:47:32jquery中绑定事件一般使用bind、on或者click,但是这只能是对已经加载好(HTML中创建...这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如: $(".Lis -
jquery给动态添加的元素绑定事件
2018-03-06 17:19:47这里介绍jQuery中如何给动态添加的元素绑定事件;在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:例如:<div id="testdiv"><ul></u... -
jquery动态添加的元素 css样式渲染失败
2016-09-07 07:36:16``` var html = "<ul class='tree'>...</ul>" $("#id").html(html); ...结果动态添加的ul元素并没有相应的效果,即class="tree"没有起作用,只有浏览器最初始的ul效果,这该怎么办呢?求大神解救啊! -
android 动态添加的checkbox设置间距大小
2014-10-16 15:08:07在LinearLayout中动态添加的checkbox之间的间距 -
关于JQuery动态添加的html会失去动态效果——(消灭bug①)
2017-10-26 11:30:36问题描述:前端开发中常常会遇到JQ需要给当前部分动态创建、添加元素或者相应HTML代码的情况,我们会给当前部分设置click等事件达到动态效果或者功能实现,但是会发现动态添加的部分失去了相应事件效果。 原因:... -
form表单 无法提交js动态添加的表单元素遇到的坑
2017-08-23 11:16:56第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 第二种情况, 才可以把js动态添加的表单元素提交到服务器端 总结:要保证... -
给Jquery动态添加的元素绑定事件
2016-11-28 10:02:40给Jquery动态添加的元素绑定事件 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是 在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不... -
动态添加的layui date标签,不弹出日期选择
2018-10-21 16:49:55其中我在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属性无效(绑定事件不可用)
2018-10-21 15:48:36在项目中第一次写动态添加的时候,遇到了一个问题,就是添加的标签,之前绑定的同class事件都失效了,查资料后发现,是绑定事件使用的方法不对,下面说一下。 首先是失效情况 $('.btn').click(function() { alert... -
jquery怎么给动态添加的html绑定点击事件?
2019-05-20 14:58:56现在有一个class为blessingLanguageSignature的html标签,它是动态添加的,我想给它加一个点击事件,一开始是这样写的: $('.blessingLanguageSignature').click(function(){}); 但是死活不行。 正确的写法: $... -
layui文件上传按钮不起作用(动态添加的元素)
2019-09-11 16:47:37动态添加的元素没有办法渲染layui.upload.render(); 分析: 1、页面在选择前,JS里的layui.upload.render()已经执行了 2、layui.upload.render()执行但是并找不到#file_choose元素,因为页面还... -
jQuery动态添加的列表项无法触发点击事件
2018-07-24 11:33:37这时点击1,2,3还是能触发点击事件,但是点击动态添加的4,5节点时却无反应。 此时代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ... -
动态添加的input file change事件不生效?
2017-08-11 05:22:54``` <!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', ()... -
FORM表单无法提交JavaScript动态添加的表单元素
2015-10-21 16:30:24说明:当前情况下,JavaScript动态添加的表单元素是不能提交到服务器端 第二种情况: 说明:这样情况下可以把js动态添加的表单元素提交到服务器 备注:在IE下,form表单放在table内,...
-
牛牛量化策略交易
-
工程制图 AutoCAD 2012 从二维到三维
-
Laravel-admin表单Form多级下拉复选框组件multiCheckbox(优化版).rar
-
【Python-随到随学】 FLask第一周
-
MySQL 高可用(DRBD + heartbeat)
-
Python启蒙到架构师的核心技术精讲课程
-
如何在界面设计中“色”诱用户?
-
基于python的dango框架购物商城毕业设计毕设源代码使用教程
-
linux基础入门和项目实战部署系列课程
-
基于隐马尔可夫模型的查询扩展方法
-
Ayon-MIST-CSE:所有在MIST,孟加拉国研究的材料-源码
-
Promise实现原理
-
SecureCRT 连接 GNS3/Linux 的安全精密工具
-
我为什么反对用Node!
-
MemeShare:Meme共享应用程序-源码
-
NFS 实现高可用(DRBD + heartbeat)
-
2021-02-26
-
swe1-docs-源码
-
面试必备算法|图解归并排序(Python)
-
Amoeba 实现 MySQL 高可用、负载均衡和读写分离