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

2019-11-19 13:35:41

字體：大中小

來源：轉載

供稿：網友

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

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

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

onclick方式獲取

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.49028c.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.49028c.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.VeVB.COm/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.49028c.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.VeVB.COm/code/HtmlJsRun 測試jquery動態獲取奇數對象運行效果：