快捷導(dǎo)航

jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法

更新時間：2018年02月24日 08:29:10 作者：花海_

下面小編就為大家分享一篇jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

代碼如下：

<%@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  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標(biāo)簽上動態(tài)添加li標(biāo)簽
			$("#li"+i).attr("class",'list-group-item');		//為li標(biāo)簽添加class屬性
		}
		$('li').on('click',function(){ 		//綁定事件
		 alert("事件綁定成功！"); 
		}); 
	</script>
</body>
</html>

運行結(jié)果：

以上這篇jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于jQuery實現(xiàn)Accordion手風(fēng)琴自定義插件
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)Accordion手風(fēng)琴自定義插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
autoPlay 基于jquery的圖片自動播放效果
效果類似這種，自動播放，實質(zhì)控制層的顯示隱藏。需要的朋友可以參考下。
2011-12-12
jQuery中:nth-child選擇器用法實例
這篇文章主要介紹了jQuery中:nth-child選擇器用法,實例分析了:nth-child選擇器功能、定義及匹配子元素或奇偶元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2014-12-12
jquery post方式傳遞多個參數(shù)值后臺以數(shù)組的方式進(jìn)行接收
在用jquery的post方式傳遞多個值時，在后臺頁面可以用數(shù)組形式接收,很不錯吧，可以接收多個值啊，接下來介紹實現(xiàn)方法，感興趣的朋友可以了解下哦
2013-01-01
artDialog雙擊會關(guān)閉對話框的修改過程分享
artDialog，一個jquery的對話框插件但是在使用時發(fā)現(xiàn)鼠標(biāo)雙擊時會自半對話框，下面與大家分享下具體的修改過程，感興趣的朋友可以參考下
2013-08-08
jQuery實現(xiàn)動態(tài)加載瀑布流
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)動態(tài)加載瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
jquery中綁定事件的異同
本文主要介紹了jquery中bind(),live(),delegate(),on()綁定事件的不同點和相同點，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
BootStrap下jQuery自動完成的樣式調(diào)整
這篇文章主要介紹了BootStrap下jQuery自動完成的樣式調(diào)整的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-05-05
BootStrap按鈕標(biāo)簽及基本樣式
這篇文章主要介紹了BootStrap按鈕標(biāo)簽及基本樣式的相關(guān)資料，基本樣式包括顏色大小方面的知識，對bootstrap按鈕相關(guān)知識感興趣的朋友一起看看吧
2016-11-11
jquery實現(xiàn)簡單易懂的圖片展示小例子
圖片展示想必大家都見到過吧，下面有個不錯的例子，通俗易懂，使用jquery實現(xiàn)的，感興趣的朋友不要錯過
2013-11-11