jQuery动态添加li标签并添加属性和绑定事件方法

FreeThinking 2018-02-24

代码如下：

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script> 
 <!-- 3.0 --> 
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> 
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
</head>
<body>
<ul id="listproject" class="list-group">
		<script type="text/javascript">			
		var JSarray = new Array();
		JSarray[0] = "array0";
		JSarray[1] = "array1";
		JSarray[2] = "array2";
		JSarray[3] = "array3";
		JSarray[4] = "array4";
		
		for(var i = 0;i<5;i++){
			$("#listproject").append("<li id=li"+i+">"+JSarray[i]+"</li>");	//在ul标签上动态添加li标签
			$("#li"+i).attr("class",'list-group-item');		//为li标签添加class属性
		}
		$('li').on('click',function(){ 		//绑定事件
		 alert("事件绑定成功！"); 
		}); 
	</script>
</body>
</html>

运行结果：

jQuery动态添加li标签并添加属性和绑定事件方法

FreeThinking

FreeThinking

相关推荐

Scala核心编程_第08章 面向对象编程(中级补充)--java动态绑定与静态绑定

Java方法调用过程中，Jvm是如何知道调用的是哪个类的方法？Jvm又是如何处理？当子类和父类存在同一个方法时，子类重写父类（接口）方法时，程序在运行时调用的方法时，是调用父类（接口）的方法呢？绑定又分为静态绑定和动态绑定。在Java中，final、pri

liqinglin0 / 0评论 2020-06-01

JVM方法的动态与静态绑定机制

实例方法与引用变量实际引用的对象的方法绑定，这种绑定属于动态绑定，因为是在运行时由JVM动态决定的；静态方法与引用变量所声明的类型的方法绑定，这种绑定属于静态绑定，因为实际上在编译阶段就已经做了绑定；System.out.println; //打印B

jvm / 0评论 2020-05-30

jQuery实现为动态添加的元素绑定事件实例分析

本文实例讲述了jQuery实现为动态添加的元素绑定事件。分享给大家供大家参考，具体如下：。在使用jquery的方式为元素绑定事件时，我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的方式请求远程数据来动态添加页面元

tztzyzyz / 0评论 2018-09-07

jQuery使用bind动态绑定事件无效的处理方法

于是不假思索的 用$.bind();来绑定事件 。当页面内容属于动态加载的时候，bind事件就存在一个bug, 只能bind一次，当你第二次触发事件的时候就没用了。我给<a>标签赋予一个click ， <a>标签包括内容都是从后台数

madanling / 0评论 2018-12-11

Vue 框架之动态绑定 css 样式实例分析

首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态

mfkpum / 0评论 2018-11-14

【JavaScript系列】动态绑定事件方法：(1)jquery的on方法；(2)html元素绑定

当使用js或jQuery动态创建元素，再用on或addEventListener监听事件时，事件并不会触发，因为传统的$.click()只能监听html初始的对象，对于动态加载的操作，需要在加载后给他的操作行为绑定方法。所以，我们可以使用jQuery的on

suis / 0评论 2019-07-25

Node.js连接RabbitMQ，断线重连，动态绑定routing key

下面将给出基于Promise式的写法。并且实现动态的队列绑定。// 读取HOSTNAME, 在跑多实例时，例如在k8s中，HOSTNAME可以获取当前pod的名称。// 多实例时，写日志，或者建立连接时，最好带上pod名称，如果出现问题，也比较好定位哪个p

zhuxue / 0评论 2019-06-28

动态加载指令时如何绑定事件(angularjs1)

在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append;这个操作，能显示没问题，如果动态组的HTML里面有ng-click等事件时，会发现显示出来的内容根本不执行ng-click绑定的方法！这个是因

Danielmumu / 0评论 2016-06-22

jquery 给动态添加元素 实现点击事件

当我们试图绑定一些事件到DOM元素上的时候，通常会使用以下的四个方法bind(),on(),live(),delegate()大家应该用的较多的是前两种方法。下面是我对四种方法的理解：

人心 / 0评论 2019-06-27

jquery动态绑定

如果$当前不存在，比如是动态生成的，那么就需要用代理的模式走，就变成$(父节点).on. 在jQuery的开发过程中，我们往往需要处理各种事件，例如click()，hover()等。希望能够帮助大家更好的了解和使用jQuery的时间处理方法。以上代码中我们

hackcat / 0评论 2015-04-23

jquery 动态创建节点并为节点添加事件和动态添加或改变class属性

关于jquery动态创建节点并为节点添加事件时，如果直接在它们上面绑定事件是不行了，需要用bind(),live(),delegate(),on()等方法就行绑定，对于为一个节点动态添加或改变class属性后，也不能通过用该改变后的class来绑定事件，如

超级赛亚人 / 0评论 2014-11-15

jquery如何动态的绑定事件

jquery如何动态的绑定事件，最近这个问题困扰着我。目前程序可以当光标移入id="a"class="X"的div中时会弹出"你好"，jquery提供了这个方法，网上也有说明，那就是bind()，

无情 / 0评论 2014-11-14

jQuery on()方法绑定动态元素的点击事件

之前就一直受这个问题的困扰，在jQuery1.7版本之后添加了on方法，之前就了解过，其优越性高于live(),bind(),delegate()等方法，在此之前项目中想用这个来测试结果发现，居然动态生成的标签点击了没反应，而live方法却能够支持，于是乎

asdjkl / 0评论 2014-09-09

live on jquery

$.live---------- 动态加载的节点也会绑定该事件

82244951 / 0评论 2013-10-24

JQuery模板 ：(六）JsViews - 基于JsRender并具有动态绑定功能的模板

1） 下一代MVVM框架，兼具MVVM的特性和JavaScript的特性，使JsRender模板更加快捷和简单。2） JsViews框架引入了声明式的数据绑定到JsRender Template，支持MVVM和MVP。3）是一个用于数据绑定的单page的a

JeWangZhe / 0评论 2013-07-30

jquery 动态生成的元素的事件无法绑定

今天遇到一个问题，由Jquery动态去生成一段html元素后，这些新生成的元素绑定的事件不起作用，后来查阅解决，废话不说，上代码，以下代码目的是点击button按钮，移除span区域。delegate官网介绍：Attach a handler to one

无情 / 0评论 2013-07-02

动态元素的绑定事件

今天遇到一个问题，因业务需求的变化需要动态的加载一些Dom节点，而初始化时的绑定事件对新加载的Dom节点不起作用，后来查询发现：：事件的绑定需要给每个元素单独绑定事件，而事件的初始化时只给存在的Dom节点绑定事件了，而新加载的Dom节点是没有绑定事件的。t

JAVALin / 0评论 2013-05-29

jquery validate绑定动态生成的dom失效的问题及解决方案

在chrome浏览器中查看事件，发现并没有keyup事件，那我就在想，有没有可能是绑定事件的时候还没有这个元素呢？于是决定用promise 改成异步。可以看到accSn并没有指向input，而只是个字符串，那看来是作用域的问题 ，我们把这段绑定的代码放到全

人心 / 0评论 2019-06-25

PHP ci db的绑定是伪绑定

伪的，最后在查询之前还是组合成了sql,失去了绑定，预编译的意义，关键是，输入字段是char,？格式化数组类型，失去了动态语言的魅力

廖金龙 / 0评论 2012-12-12

jQuery -- 如何为动态添加的元素绑定事件处理函数 .

有一段时间没用jquery了，今天又碰到这个问题。当时是知道有livejquery可以解决。但是我并不喜欢为了这个而另外加载一个。我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。即使你

83457317 / 0评论 2011-11-03

Jquery对动态生成的元素绑定事件

查询 Jquery api中的 .live()事件；很多时候我们对一个对象绑定一个事件的时候老是发现绑定不成功，这时你可以查查看这个对像是不是你通过Jquery动态生成的。jQuery的html()可以给现在元素附加新的元素，innerHTML也可以，那么

publicTIM / 0评论 2011-10-19

【jQuery】解决动态添加的元素绑定事件不生效的问题

最近做需求，碰到一个问题，动态新增的元素绑定的鼠标移入事件不生效。如下面的ul标签。

AB君 / 0评论 2018-11-30

BDD驱动下的自动化测试

APP开发领域受控于APP行业知识传，正确验收，以及自动化测试。使用cocomber,appium,svn,maven搭建商用测试迭代环境。使用Android Hieracrchyviewer动态解析app资源；使用appium实现Page Object

qianbingbing / 0评论 2015-11-15

jQuery对 动态添加的元素 绑定事件

当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签，然后执行css、js代码，在执行js代码的时候就注册了相应绑定的事件，我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 ：。但是对用js动态添加的元素 是无效的，即没有绑定单击事件

83284158 / 0评论 2018-07-07

jQuery实现动态生成表格并为行绑定单击变色动作的方法

本文实例讲述了jQuery实现动态生成表格并为行绑定单击变色动作的方法。分享给大家供大家参考，具体如下：。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总

88570299 / 0评论 2017-04-17

微信小程序 动态绑定数据及动态事件处理

})利用image的data-Type，可以在js后台中知道是点击了哪个image,上传图片后再循环得出相等data-type的数据项进行赋值，这样就能动态给相应的标签赋值

zuoliangzhu / 0评论 2019-05-09

vue动态绑定组件子父组件多表单验证功能的实现代码

前端项目中经常会下拉或者选项卡，如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义，而且都写在一起后人很难维护。Vue核心在于组件，如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过。<el-select v-m

chelongfei / 0评论 2018-05-14

微信小程序如何像vue一样在动态绑定类名

小程序 开发中遇到这样一个问题...但是都是通过同一元素来遍历的,当时卡了一下。后来发现有module模块化这一概念,于是查了下api，一下子就做出来了。就是不同名次上边的样式根据实际情况展示效果。我们可以将一些公共的代码抽离成为一个单独的 js 文件，作

tianping / 0评论 2018-04-17

jQuery动态添加元素无法触发绑定事件的解决方法分析

本文实例讲述了jQuery动态添加元素无法触发绑定事件的解决方法。分享给大家供大家参考，具体如下：。最近遇到一个问题，即当用jquery动态添加元素后，发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料，发现原来要这样处理：。<button

aspgreener / 0评论 2018-01-02

AngularJS 单选框及多选框的双向动态绑定

AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单，如下所示：。只需要用ng-model 与 $scope 中的属性对应，即实现了type=”text” 的双向动态绑定。当 <

Inuyasha / 0评论 2017-04-20

vue动态生成dom并且自动绑定事件

用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。</script>你会发现input框输入的值直接就能在其下面的div里就

fqtrnt / 0评论 2017-04-19

Angularjs 动态添加指令并绑定事件的方法

})如果用angularjs应该怎么实现呢？想当然的情况是这样的：。这里用到了$compile服务，官方的解释是compile可以将一个HTML字符串或者DOM编译成模板，该模板能够与scope链接起来，也就是说直接插入一段html片段到页面中，虽然能插入

夏小球 / 0评论 2017-04-13

jQuery为DOM动态追加事件的方法

处理一个列表绑定，因为是一个展示项目，没有使用复杂的插件，直接jsrender写了个模板，但是后面有一个操作按钮，去查看数据详情，想到了jquery使用on进行事件委托，然后就开搞。})当然这样是不起作用的，因为在document reday后，.btn-

83991231 / 0评论 2019-04-29

浅谈jQuery中事情的动态绑定

在jQuery的开发过程中，我们往往需要处理各种事件，例如click()，hover()等。在jQuery的API中，我们可以使用不同的方法来将这些事件绑定到特定的元素中。今天这篇文章中，我们将要介绍如何使用bind()，on()，live()和deleg

86403563 / 0评论 2019-04-29

python类的方法属性与方法属性的动态绑定代码详解

最近在学习python，纯粹是自己的兴趣爱好，然而并没有系统地看python编程书籍，觉得上面描述过于繁琐，在网站找了一些学习的网站，发现廖雪峰老师的网站上面的学习资源很不错，而且言简意赅，提取了一些python中的重要的语法和案例。重要的是可以在线测试p

sizhixht / 0评论 2017-12-27

AngularJS实现给动态生成的元素绑定事件的方法

本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法。分享给大家供大家参考，具体如下：。1 . 我们知道在jQuery中，动态生成一个元素，如果要在动态生成元素的同时，动态绑定事件，可以通过live/on方法。2 . 在AngularJS中，

Inuyasha / 0评论 2016-12-14

AngularJS动态绑定HTML的方法分析

在Web前端开发中，我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示，特别是在内容管理系统，这样的需求，更是遍地皆是。对于对angular的读者肯定首先会想到ngBindHtml，对,angular为我们提供了这个指

表里如一 / 0评论 2016-11-07

关于jquery中动态增加select,事件无效的快速解决方法

近来做项目，用的jquery1.6.2库，当动态增加div 及select时，事件却不起作用。查了一些资料，发现bind事件：向匹配元素附加一个或更多事件处理器。而live事件：为当前或未来的匹配元素添加一个或多个事件处理器。live方法的处理机制就是把事

yffkjhg / 0评论 2019-04-26

关于动态生成dom绑定事件失效的原因及解决方法

之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下：。所以如果利用bind绑定事件的话，要先unbi

XZZ0 / 0评论 2019-04-26

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

}以上代码执行时，点击#check_all时，alert一直没反应，后在网上查资料时，才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的：。支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就

mcx / 0评论 2016-07-07

jQuery on()方法绑定动态元素的点击事件实例代码浅析

之前就一直受这个问题的困扰，在jQuery1.7版本之后添加了on方法，之前就了解过，其优越性高于live(),bind(),delegate()等方法，在此之前项目中想用这个来测试结果发现，居然动态生成的标签点击了没反应，而live方法却能够支持，于是乎

87407607 / 0评论 2019-04-26

jQuery页面元素动态添加后绑定事件丢失方法,非 live

代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失。</script>代码2: 以jquery的live方法绑定change事件,alert不会丢失,但是在点击add时有可能多次添加inpu

83500391 / 0评论 2016-06-16

Docker高级应用之动态绑定卷组

为什么使用卷组呢，比如想把物理机里的目录给予容器共享，或者把物理机的一个目录作为共享目录，做日志搜集等等功能。举例物理机目录/data/software想挂载到容器的/tmp/software里其中/data/software内容是15:21:14 # l

julywind / 0评论 2015-02-13

jquery html动态添加的元素绑定事件详解

alert("I'm "+name);//test($(this).attr("name"));});// $("#testdiv ul li[name='apple']").trigger(&q

83991231 / 0评论 2019-04-26

AngularJS单选框及多选框实现双向动态绑定

在AngularJS中提及双向数据绑定，大家肯定会想到ng-model指令。ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。始终用n

老卫的技术站 / 0评论 2016-01-13

动态的绑定事件addEventListener方法的使用

<input id = "but1" type = "button" value = "投票" />

东成熙就 / 0评论 2014-01-24

jQuery支持动态参数将函数绑定到事件上的方法

本文实例讲述了jQuery支持动态参数将函数绑定到事件上的方法。分享给大家供大家参考。});希望本文所述对大家的jQuery程序设计有所帮助。

前端档案 / 0评论 2015-03-17

jQuery给动态添加的元素绑定事件的方法

本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8

80991930 / 0评论 2019-04-20

jquery弹窗插件colorbox绑定动态生成元素的方法

colorbox是jquery一个非常好用的弹窗插件，功能十分丰富，使用体验也很好。刚才在是用colorbox的时候遇到了一个问题，这个问题以前没有注意过。<a class="test" href="test.jpg&q

87407607 / 0评论 2019-04-18