2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@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"
>
</
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
>