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

代码如下：

<%@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标签并添加属性和绑定事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery为iframe的body添加click事件的实现代码

    html结构如下: 复制代码 代码如下: <html> <head> <title>为body添加click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="jquery-1.5.2.js&quo

  • Jquery为DIV添加click事件的简单实例

    今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html <a href="javascript:void(0);" id="click_ms" > <img src="img/bbg_08.jpg" border="0" > </a> jquery事件 $('#click_ms').click(function

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

    代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="Add" name="test_but" /> <div id="test_div"><input name="test_input"/></div> <script> $('input[

  • JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

    JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

    本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能.分享给大家供大家参考,具体如下: 最近为了实现这个简单的功能也是看了很多的内容,终于找出了看起来简单易实现的方法,我觉得能用最简洁的代码实现,就不要写的那么复杂,看也看不懂.先码着,为后面的项目做做准备. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <met

  • 轻松实现jQuery添加删除按钮Click事件

    轻松实现jQuery添加删除按钮Click事件

    大家登陆一些网站或论坛时,经常会被要求先浏览和确认"用户协议"."用户协议"底部通常会设置一个"我已阅读并同意"复选框,勾选了该复选框,"登陆"按钮才可用. 如下图所示,勾选"I have read and accept."复选框,Login按钮才会相应click事件,登陆成功后切换到欢迎画面. 通常情况我们是怎么实现的呢,很多同学会想到用javascript设置按钮的disabled属性.这当然是一种不错

  • jquery slibings选取同级其他元素的实现代码

    jquery slibings选取同级其他元素的实现代码

    复制代码 代码如下: <script type="text/javascript">$(function(){    $("#downloadchartsright .chartstitleopt,#downloadchartsleft .chartstitleopt").click(function(){        $(this).siblings().removeClass('underline').end().addClass('underli

  • JQuery 给元素绑定click事件多次执行的解决方法

    原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jQuery 滑动方法slideDown向下滑动元素

    jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换. jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素. 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例

    本文实例讲述了jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法.分享给大家供大家参考,具体如下: siblings()属于jQuery筛选类的API,用来查找某个元素的所有同辈元素(所有兄弟姐妹). <div id="contentHolder"> <input type="button" value="1" id="button1"></input> <inpu

随机推荐