jQuery-给ul添加了li之后，添加的li并没有绑定点击监听怎么办？
我們看一個(gè)簡(jiǎn)單的例子
效果圖如下
這里面有一個(gè)ul里面套著4個(gè)li，還有一個(gè)獨(dú)立的li
代碼實(shí)例:
需求
1.點(diǎn)擊li，背景就會(huì)變成紅色
2.點(diǎn)擊btn，就會(huì)添加一個(gè)li
效果如下:
我們會(huì)發(fā)現(xiàn)，添加之后的li點(diǎn)擊了沒(méi)有變化，說(shuō)明添加之后的li并沒(méi)有綁定點(diǎn)擊監(jiān)聽(tīng)
解決方法一(普通方法):
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css"></style></head><body> <ul><li>111</li><li>222</li><li>333</li><li>444</li></ul><li>222</li><button id="btn">添加一個(gè)li</button><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">//1.點(diǎn)擊li，背景就會(huì)變成紅色$('ul>li').click(function() {//第一種寫(xiě)法this.style.background = 'red';//第二種寫(xiě)法 $(this).css('background','red');});//2.點(diǎn)擊btn，就會(huì)添加一個(gè)li$('#btn').click(function() {$('ul').append('<li>222</li>')//這里我們會(huì)發(fā)現(xiàn)，當(dāng)我們添加了一個(gè)li之后，點(diǎn)擊它背景顏色并不會(huì)改變.children('li')//找到ul的孩子li.click(function() {//添加點(diǎn)擊事件this.style.background = 'red';});});</script></body> </html>方法二(事件委托):
1.簡(jiǎn)單講解
(1)事件委托(代理/委派)：
->將多個(gè)子元素(li)的事件監(jiān)聽(tīng)委托給父輩元素(ul)處理
->監(jiān)聽(tīng)回調(diào)是加在了父輩元素上
->當(dāng)操作任何一個(gè)子元素(li)時(shí)，事件會(huì)冒泡到父輩元素(ul)
->父輩元素不會(huì)直接處理事件，而是根據(jù)event.target得到發(fā)生事件的子元素(li),通過(guò)這個(gè)子元素調(diào)用事件回調(diào)函數(shù)
(2)事件委托的雙方
->委托方: 業(yè)主li
->被委托方: 中介ul
(3)使用事件委托的好處
->添加新的子元素，自動(dòng)有事件響應(yīng)處理
->減少事件監(jiān)聽(tīng)的數(shù)量
(4)jQuery事件委托API
->設(shè)置事件委托:$(parentSelector).delegate(childrenSelector,eventName,callback)
->移出事件委托:$(parentSelector).undelegate(eventName)
2.代碼實(shí)例
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css"></style></head><body> <ul><li>111</li><li>222</li><li>333</li><li>444</li></ul><li>222</li><button id="btn">添加一個(gè)li</button><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">//1.點(diǎn)擊li，背景就會(huì)變成紅色$('ul>li').click(function() {//第一種寫(xiě)法this.style.background = 'red';//第二種寫(xiě)法 $(this).css('background','red');});//2.點(diǎn)擊btn，就會(huì)添加一個(gè)li$('#btn').click(function() {$('ul').append('<li>222</li>');});//事件委托$('ul').delegate('li','click',function() {this.style.background = 'red';});</script></body> </html>3.效果
請(qǐng)讀者復(fù)制代碼自行測(cè)試
總結(jié)
以上是生活随笔為你收集整理的jQuery-给ul添加了li之后，添加的li并没有绑定点击监听怎么办？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 在servlet中设置的字符编码集为什么
- 下一篇： jQuery-事件委托(基本概述+实例)