在做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. wrk中的lua脚本(转)

    转载地址:http://www.tuicool.com/articles/IFjIJjU wrk是一款现代化的http压测工具,提供lua脚本的功能可以满足每个请求或部分请求的差异化. wrk中执行h ...

  2. subprocess module

    subprocess 主要用于执行外部命令和程序, 极大的增强了Python的功能. 比如你要用bowtie, 你可以在python中调用这个程序. 运行python时,我们都是在创建并运行一个进程, ...

  3. Boot Repair-能一键修复ubuntu启动/引导项的软件(告别命令行)

    如果你是windows+ubuntu的双系统,那么重装windows之后(非ghost 方式),是会直接进入windows的,之前的grub引导菜单会被抹掉,想要修复ubuntu的启动菜单的话,通常需 ...

  4. 工作中遇到的问题--Hibernate注解添加在一方和多方的区别

    以Good和GoodStatus为例: 一.注解仅添加在一方: @Entity@Table(name = "GOOD")@Where(clause="enabled=1& ...

  5. Codeforces Round #135 (Div. 2)

    A. k-String 统计每个字母出现次数即可. B. Special Offer! Super Price 999 Bourles! 枚举末尾有几个9,注意不要爆掉\(long\ long\)的范 ...

  6. Linux网络管理概述

    概述:计算机基础知识.网络基础知识其实是所有的程序员所必须的,甚至已经不仅仅是程序员的专利,而是每一个人都应该掌握的计算机知识. 主要内容: 一.网络基础 二.Linux网络配置 三.Linux网络命 ...

  7. php parse_url 函数教程

    [导读] php parse_url 函数教程parse_url ( PHP 4中, PHP 5中) parse_url -解析URL并返回其组成部分 描述 混合parse_url (字符串$网址[摘 ...

  8. UVALive-4670 Dominating Patterns(AC自动机)

    题目大意:找出出现次数最多的模式串. 题目分析:AC自动机裸题. 代码如下: # include<iostream> # include<cstdio> # include&l ...

  9. hdu3594 强连通(仙人掌图)

    题意:给定一张有向图,问是否是仙人掌图.仙人掌图的定义是,首先,这张图是一个强连通分量,其次所有边在且仅在一个环内. 首先,tarjan可以判强连通分量是否只有一个.然后对于所有边是否仅在一个环内,我 ...

  10. phpstrom 编辑器设置

    http://www.jb51.net/article/58069.htm 配置sublime主题  保存配置的路径为:C:\Users\Administrator\.WebIde100\config ...