在做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. magento安装以及搬家的注意事项

    如果你的空间可以用ssh的话,你可以在官网的wiki Moving Magento To Another Server 中看到较为详细的搬家过程. 无论你的服务器是linux系统还是windows系统 ...

  2. iOS-微信支付平台

    微信支付1:去微信开放平台注册应用https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN&token=2c0f ...

  3. 【题解】【矩阵】【回溯】【Leetcode】Rotate Image

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  4. Think Python - Chapter 16 - Classes and functions

    16.1 TimeAs another example of a user-defined type, we’ll define a class called Time that records th ...

  5. Linux下用C读取配置文件。类似ini这样。

    Introduction ccl is the customizable configuration library, a collection of functions for applicatio ...

  6. Java-->类的成员

    一.方法重载 在同一个类中,方法名相同.形参列表不同的两个多个方法之间构成重载!overload 调用方法的时候,是根据你传递的实参,来决定到底调用的是重载的哪个方法!!! 注意: 1.判断形参列表是 ...

  7. Redis的初步安装

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 下载 官网下载:http://redis.io/downlo ...

  8. Canvas俄罗斯方块

    写在前面 潜水博客园多年,从未写过博客.最近才注册博客,遂将很久前写的俄罗斯方块分享出来.第一次写博客,不喜勿喷... 游戏说明 游戏操作:J向左,L向右,I旋转,K快速下降 游戏基于HTML can ...

  9. socket 简介

    对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问: 1.         什么是TCP/IP.UDP?2.         Sock ...

  10. C++ Primer : 第十二章 : 动态内存之allocator类

    标准库allocator类定义在头文件 <memory>中.它帮助我们将内存分配和构造分离开来,它分配的内存是原始的.未构造的. 类似vector,allocator也是一个模板类,我们在 ...