jQuery實現獲取動態添加的標簽對象示例

來源：懂視網責編：小采時間：2020-11-27 22:12:14

jQuery實現獲取動態添加的標簽對象示例

jQuery實現獲取動態添加的標簽對象示例:本文實例講述了jQuery實現獲取動態添加的標簽對象。分享給大家供大家參考，具體如下： jquery無法直接給網頁里面動態添加點擊事件，并且獲取到對象一般來說，js獲取動態添加的組件都是自定義給標簽添加上onclick屬性來達到調用，這是普通的方法，如下： o

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery實現獲取動態添加的標簽對象示例:本文實例講述了jQuery實現獲取動態添加的標簽對象。分享給大家供大家參考，具體如下： jquery無法直接給網頁里面動態添加點擊事件，并且獲取到對象一般來說，js獲取動態添加的組件都是自定義給標簽添加上onclick屬性來達到調用，這是普通的方法，如下： o

本文實例講述了jQuery實現獲取動態添加的標簽對象。分享給大家供大家參考，具體如下：

jquery無法直接給網頁里面動態添加點擊事件，并且獲取到對象

一般來說，js獲取動態添加的組件都是自定義給標簽添加上onclick屬性來達到調用，這是普通的方法，如下：

onclick方式獲取

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com jQuery動態獲取事件</title>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 var html="";//聲明變量用于存放html
 for (i=0;i<=10;i++){
 html=html+"<button onclick='btnclick(this)'>按鈕"+i+"</button></br>";
 }
 $('#test').html(html);
 function btnclick(e) {
 console.log(e.textContent);//獲取按鈕文本
 }
</script>
</html>

如今jquery已經到了3版本了，官方已經放棄live方式了，推薦使用on方法。語法為

$('選擇器').on('click','選擇類型',function (e){代碼段}

jquery不能動態獲取到網頁里面的標簽，需要先獲取到網頁固定的標簽，讓后再獲取里面其他的標簽，所以，如上面代碼中的id為test的div是固定不變的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com jQuery動態獲取事件</title>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 var html="";//聲明變量用于存放html
 for (i=0;i<=10;i++){
 html=html+"<button>按鈕"+i+"</button></br>";
 }
 $('#test').html(html);
 $('#test').on('click','button',function (e){
 console.log($(this));
 });
</script>
</html>

使用http://tools.jb51.net/code/HtmlJsRun測試運行效果：

這樣寫就非常簡單了，其中選擇類型里面的button還可以進一步限制，如：button[class=test]，就是選擇動態創建的類為text的按鈕。

要實現單雙數只需要在test后面加”:even”,button[class=test]:even，或者odd偶數

修改后的示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com jQuery動態獲取事件</title>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 var html="";//聲明變量用于存放html
 for (i=0;i<=10;i++){
 html=html+"<button class=test>按鈕"+i+"</button></br>";
 }
 $('#test').html(html);
 $('#test').on('click','button[class=test]:even',function (e){
 console.log($(this));
 });
</script>
</html>

繼續使用http://tools.jb51.net/code/HtmlJsRun 測試jquery動態獲取奇數對象運行效果：