快捷導(dǎo)航

jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象示例

更新時(shí)間：2018年06月28日 12:28:05 作者：applek_Case

這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加、元素獲取與事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象。分享給大家供大家參考，具體如下：

jquery無(wú)法直接給網(wǎng)頁(yè)里面動(dòng)態(tài)添加點(diǎn)擊事件，并且獲取到對(duì)象

一般來(lái)說(shuō)，js獲取動(dòng)態(tài)添加的組件都是自定義給標(biāo)簽添加上onclick屬性來(lái)達(dá)到調(diào)用，這是普通的方法，如下：

onclick方式獲取

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>chabaoo.cn jQuery動(dòng)態(tài)獲取事件</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已經(jīng)到了3版本了，官方已經(jīng)放棄live方式了，推薦使用on方法。語(yǔ)法為

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

jquery不能動(dòng)態(tài)獲取到網(wǎng)頁(yè)里面的標(biāo)簽，需要先獲取到網(wǎng)頁(yè)固定的標(biāo)簽，讓后再獲取里面其他的標(biāo)簽，所以，如上面代碼中的id為test的div是固定不變的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>chabaoo.cn jQuery動(dòng)態(tài)獲取事件</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測(cè)試運(yùn)行效果：

這樣寫(xiě)就非常簡(jiǎn)單了，其中選擇類(lèi)型里面的button還可以進(jìn)一步限制，如：button[class=test]，就是選擇動(dòng)態(tài)創(chuàng)建的類(lèi)為text的按鈕。

要實(shí)現(xiàn)單雙數(shù)只需要在test后面加”:even”,button[class=test]:even，或者odd偶數(shù)

修改后的示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>chabaoo.cn jQuery動(dòng)態(tài)獲取事件</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>

繼續(xù)使用http://tools.jb51.net/code/HtmlJsRun 測(cè)試jquery動(dòng)態(tài)獲取奇數(shù)對(duì)象運(yùn)行效果：