在做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元素的更多相关文章

  1. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  2. jquery 动态创建的元素,绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  3. jQuery动态创建html元素的常用方法汇总

    在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...

  4. javascript和jquery动态创建html元素

    1.javascript创建元素 创建select var select = document.createElement("select");        elect.opti ...

  5. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  6. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  7. 用jQuery绑定事件到动态创建的元素上

    jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...

  8. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  9. 动态创建dom元素

    效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...

随机推荐

  1. Runtime 、 Block

    1 使用Block方式,对学生对象进行排序. 1.1 问题 在iOS4.0+ 和Mac OS X 10.6+ 中添加了Block概念,以对C语言进行扩展.在Block中可以定义参数列表.返回类型,还可 ...

  2. 九、CCAction

    之前介绍CCNode的时候说过,动作是指在特定时间内完成移动.缩放.旋转等操作的行为,节点可以通过运行动作来实现动画效果,这里的动作就是指CCAction对象,它有很多的子类,每个子类都封装了不同的动 ...

  3. hdu 4252 A Famous City

    题意:一张相片上的很多建筑相互遮住了,根据高低不同就在相片上把一座高楼的可见部分作为一个矩形,并用数字描述其高度,若一张相片上的两个建筑群中间有空地,高度则为0;求最少有多少个建筑; 分析: 输入的0 ...

  4. jq中阻止元素的默认行为

    event.preventDefault();//阻止元素的默认行为

  5. java的加减乘除

    //编写一个程序,用户输入两个数,求出其加减乘除,并用消息框显示计算结果.//MengYao,2015,10,6 import javax.swing.JOptionPane;public class ...

  6. boot/setup.S

    !!    setup.S        Copyright (C) 1991, 1992 Linus Torvalds!! setup.s is responsible for getting th ...

  7. Oracle数据库Linux下的导入IMP

    和相关篇的EXP相对应的用了如下的导入方法. [oracle@localhost ~]$ imp Import: Release 11.2.0.1.0 - Production on Fri Sep ...

  8. sqlserver 索引

    什么是索引 拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为4K .为了加快查找的速度,汉语字(词)典一般都有按拼音. ...

  9. STL概述

    一.关于STL STL(Standard Template Library,标准模板库)是C++语言标准中的重要组成部分.STL 以模板类和模板函数的形式为程序员提供了各种数据结构和算法的精巧实现,程 ...

  10. C/C++程序员必须熟练应用的开源项目(转-清风小阁)

    作为一个经验丰富的C/C++程序员, 肯定亲手写过各种功能的代码, 比如封装过数据库访问的类, 封装过网络通信的类,封装过日志操作的类, 封装过文件访问的类, 封装过UI界面库等, 也在实际的项目中应 ...