<!DOCTYPE html>
<html>
<head>
<title>.delegate() test</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js">
</script>
<script>
$(function () {
$("#b1").click(function () {
//準備記錄執行時間
var st = new Date();
//用.live()為#t td加掛click事件
//注意: 以下的寫法會比$("#t td")更有效率
$("td", document.getElementById("t"))
.live("click", function () {
$("#s1").text("live - " + $(this).text());
});
//顯示執行時間
alert(".live() ticks - " +
(new Date().getTime() - st.getTime()));
});
$("#b2").click(function () {
//準備記錄執行時間
var st = new Date();
//先取得#t的jQuery物件，用.delegate()為td加掛click事件
$("#t").delegate("td", "click", function () {
$("#s2").text("delegate - " + $(this).text());
});
//顯示執行時間
alert(".delegate() ticks - " +
(new Date().getTime() - st.getTime()));
});
$("#b3").click(function () {
//建立一個包含5萬cell的table
var sb = [];
var idx = 0;
for (var r = 0; r < 2000; r++) {
sb.push("<tr>");
for (var c = 0; c < 25; c++)
sb.push("<td>" + (idx++) + "</td>");
sb.push("</tr>");
}
$("#t").html(sb.join('\n'));
});
});
</script>
<style>
#t td { border: 1px solid gray; text-align: center; cursor: pointer; }
.display span
{
border: 1px solid red; display: inline-block; margin: 5px;
width: 100px; text-align: center; background-color: #dddddd;
}
</style>
</head>
<body>
<input type="button" id="b1" value="Test .live()" />
<input type="button" id="b2" value="Test .delegate()" />
<input type="button" id="b3" value="Create Table" />
<span class="display">
<span id="s1"> </span>
<span id="s2"> </span>
</span>
<table id="t"></table>
</body>
</html>