基于jQuery动态创建html元素
在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了。
常见的动态创建HTML元素的方式,有如下几种,大体都差不多!
html 函数:
var eleHtml = "<div id='newone'> xxx </div>'";
jQuery(your_specified_selector).html(eleHtml)
append 函数:
var eleHtml = "<div id='newone'>xxx</div>";
jQuery(your_specified_selector).append(eleHtml);
appendTo函数:
var eleHtml = "<div id='newone'>xxx</div>";
jQuery.(eleHtml).appendTo(your_specified_selector);
但是,动态生存的html元素,没有办法通过常规的click函数给jquery给其绑定函数响应,需要通过下面的方式实现(下面是一个例子,我的项目中的片段代码):
$("#userinfopanel").click(function(e){
if($(e.target).is("#clear")){
//your logic
}else{
//your logic
}
}
另外, jquery validate 也没有办法对动态生成的html表单元素进行合法性校验。需要自己实现。
基于jQuery动态创建html元素的更多相关文章
- jquery动态创建页面元素
jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- jQuery动态创建html元素的常用方法汇总
在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...
- javascript和jquery动态创建html元素
1.javascript创建元素 创建select var select = document.createElement("select"); elect.opti ...
- jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
- JavaScript 、jQuery动态创建元素的关键字~
JavaScript动态创建元素: 1.创建元素 如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...
- 用jQuery绑定事件到动态创建的元素上
jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...
- 解决jquery动态创建元素绑定事件失效问题
存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...
- 动态创建dom元素
效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...
随机推荐
- MINIX3 保护模式分析
3.1 INTEL 保护模式概要 先要说明一个问题:不是 MINIX3 一定要设置这个保护模式,但是在 386 平台上, 引入了这个保护模式机制,MINIX3 不得不设立相关保护模式的内容.由于 38 ...
- BLP模型
编号:1002时间:2016年3月29日16:24:33功能:多级安全BLP模型 URL:http://blog.csdn.net/longronglin/article/details/150033 ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- 【ES5】hideProperty
function hideProperty(host, name, value) { Object.defineProperty(host, name, { value: value, writabl ...
- dedecms 蜘蛛抓取设置 robots.txt
我们可以用robots.txt屏蔽蜘蛛文件来跟蜘蛛来达成一个协议,但现在很少注重,其实用好robots.txt屏蔽蜘蛛文件,能给你的网站提高权重,接下来重庆SEO讲一下robots.txt屏蔽蜘蛛文件 ...
- php面向对象之抽像类、接口、final、类常量
一.抽像类(abstract) 在我们实际开发过程中,有些类并不需要被实例化,如前面学习到的一些父类,主要是让子类来继承,这样可以提高代码复用性语法结构: 代码如下 复制代码 ab ...
- Customize R initiallization in Mac
First, we need to find a "Rprofile" document. locate Rprofile Then we find Rprofile docume ...
- 关于FireFox类VIM插件。VimPerator
说实话现在一直非常喜欢VIM的那种操控方式.当然我不是一个程序员,只是觉得处理文本的时候,那种效率很快.而且不用来回再鼠标跟键盘之间的切换也让我感觉很舒服. 以前一直在想如果开网页的时候也能那样得话不 ...
- shell 脚本实战笔记(6)--集群环境配置检测
1). 背景: 集群部署的时候, 需要一致的配置和环境设置. 对于虚拟机集群, 可以借助镜像拷贝, 复制和还原集群机器. 对与物理机集群而言, 则不一样, 如果机器一多, 多人去操作和配置, 对于成熟 ...
- 行为识别笔记:improved dense trajectories算法(iDT算法)(转载)
iDT算法是行为识别领域中非常经典的一种算法,在深度学习应用于该领域前也是效果最好的算法.由INRIA的IEAR实验室于2013年发表于ICCV.目前基于深度学习的行为识别算法效果已经超过了iDT算法 ...