寫在前面：
這是昨天參加一個筆試的時候遇到的題，百度了一下之後自己寫了一個簡單的測試。
首先簡單說一下動態添加，因爲樓主智障，開始的時候沒有通過button按鈕綁定click事件，直接在js中用三種方法添加了三個<li>，結果不論用什麼方法綁定都能成功，一下腦子沒轉過來頓時就懵逼了。
所以我理解的動態應該是通過用戶操作添加的元素，而不是一開始頁面加載完就有的。
然後是綁定方法，現在通過jQuery添加元素的方法大致如下：
1、不能綁定動態添加的元素的方法
$('...').click(function(event){
if($(event.target).is('a')){alert($(this).text())}
})
或
$('...').bind(event,function(){})
2、可以給動態添加的元素綁定事件的方法：
據說不同jQuery版本的使用方法情況是這樣
Query 1.3-1.4.2 用.live('click',func)
1.4.2-1.7 用.delegate（'li','click',func）
1.7後 用.on('click','li',func)
我沒有去下之前的版本測試，自己用的是3.2.1，就直接用的on方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>綁定動態添加元素</title>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function appendLi(){
//以html創建新元素
var lic='<li id="c">something3</li>';
//用jQuery創建新元素
var lid=$('<li id="d">something4</li>');
//用DOM創建新元素
var lie=document.createElement('li');
var text=document.createTextNode('something5');
lie.setAttribute('id','e');
lie.appendChild(text);
//添加元素
$('ul').append(lic,lid,lie);
});
$('#c').click(function(){
alert( $(this).text() );
}); //id爲c的li未綁定成功
$('ul').on('click','#d',function(){
alert( $(this).text() );
}); //id爲d的li綁定成功
$('li').bind('mouseover',function(event) {
$(this).css('color','#ccc')
}); //動態添加的cde未綁定成功，原有的ab綁定成功
$('li').mouseleave(function(event) {
$(this).css('color','black')
}); //動態添加的cde未綁定成功，原有的ab綁定成功
});
</script>
</head>
<body>
<div id='test'>
<ul>
<li id='a'>something1</li>
<li id='b'>something2</li>
</ul>
</div>
<button id='btn'>add li</button>
</body>
</html>