jQuery實作取得動態新增的標籤對象-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作取得動態新增的標籤對象

不言

Jun 28, 2018 pm 03:47 PM

jquery動態新增

這篇文章主要介紹了jQuery實現獲取動態添加的標籤對象,涉及jQuery針對頁面元素的動態添加、元素獲取與事件響應相關操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實作獲取動態新增的標籤物件。分享給大家供大家參考，具體如下：

jquery無法直接給網頁裡面動態新增點擊事件，並且取得到物件

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

onclick方式獲取

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</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=&#39;btnclick(this)&#39;>按钮"+i+"</button></br>";
  }
  $(&#39;#test&#39;).html(html);
  function btnclick(e) {
    console.log(e.textContent);//获取按钮文本
  }
</script>
</html>

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

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

##jquery不能動態取得網頁裡面的標籤，需要先取得到網頁固定的標籤，讓後再取得裡面其他的標籤，所以，如上面程式碼中的id為test的p是固定不變的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</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>";
  }
  $(&#39;#test&#39;).html(html);
  $(&#39;#test&#39;).on(&#39;click&#39;,&#39;button&#39;,function (e){
    console.log($(this));
  });
</script>
</html>

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

要實作單雙數只需要在test後面加」

:even」,button[class=test]:even，或odd偶數

修改後的範例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</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>";
  }
  $(&#39;#test&#39;).html(html);
  $(&#39;#test&#39;).on(&#39;click&#39;,&#39;button[class=test]:even&#39;,function (e){
    console.log($(this));
  });
</script>
</html>

#測試jquery動態取得奇數物件運作效果：