基于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,大家可以随便想象下哪些情况会遇到动态创 ...
随机推荐
- 多界面开发 、 导航控制器(NavigationController)
1 VC之间的跳转和正向传值 1.1 问题 在实际的开发中更多的应用都会有多个页面组成,每个页面展示不同的信息,页面之间的跳转是由视图控制器来实现的,本案例实现两个页面的之间的跳转和页面之间的正向传值 ...
- D - 排列
#include<cstdio> #include<algorithm> #include<string.h> using namespace std; #defi ...
- EL 表达式 取值将 < 转成 &1t 问题
因为用JeeCMS,JeeCMS后台会存入<p></p> 内容到数据库中 用play框架取后台值的时候 用的EL表达式在前台展示 出现将< 转成 &1t HTML ...
- dede文章摘要字数的设置方法
本文转自:http://blog.csdn.net/yxwmzouzou/article/details/17491991 在织梦系统中(针对5.7版本),文章摘要(可以通过以下四种相关标签调用)被设 ...
- Core Java Volume I — 4.7. Packages
4.7. PackagesJava allows you to group classes in a collection called a package. Packages are conveni ...
- ehcache memcache redis -- java中的三大缓存
三个缓存在java代码中用的是较多的,但是它们都有自己的应用场合,和优缺点. Ehcache 1.初衷:减少数据库操作的高延时而设计.(缓存的目的,好像都是这个吧) 2.Apache Licen ...
- ZOJ 1095 Humble Numbers
原题链接 题目大意:定义了一种数字Humble Number,他们的质因数只包含2.3.5.7中的一个或者几个,求第n个这样的数,1<=n<=5842. 解法:一看到这道题又在想DFS了, ...
- spingmvc 返回json数据日期格式化方法
第一种: json 用的是这个依赖 <!-- JSON lib 开发包 以及它的依赖包 --> <dependency> <groupId>com.fasterxm ...
- System program problem detected 解决
每次开机都出现:System program problem detected 管理员权限打开:/etc/default/apport su root vim /etc/default/app ...
- leetcode 105 Construct Binary Tree from Preorder and Inorder Traversal ----- java
Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...