JS為動態建立的元素新增事件-js教程-PHP中文網

首頁

web前端

js教程

JS為動態建立的元素新增事件

小云云

Mar 19, 2018 am 09:04 AM

javascript 事件添加

本文主要和大家介紹了JS實現為動態創建的元素添加事件操作,涉及javascript頁面元素動態添加及事件響應相關操作技巧,需要的朋友可以參考下，希望能幫助到大家。

html中直接產生的元素，加入事件，我們都知道，但是如何為一個動態產生的元素添加事件呢，jquery中的live方法可以做到這一點

具體實作可以在demo中看到

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net - JS实现为动态创建的元素添加事件</title>
    <script src="js/lib/jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <button id="btn">添加事件</button>
    <p id="panel"></p>
    <script>
//   js原生实现
//     var btn=document.getElementById("btn");
//     btn.onclick=function(){
//       var arr= [];
//       for(var i=0;i<10;i++){
//         arr.push("<p id=&#39;nep&#39;>"+i+"</p>");
//       }
//
//     document.getElementById("panel").innerHTML=arr.join(&#39;<br/>&#39;);
//     }
//
      //jquery部分实现
      $("#btn").click(function(){
        var arr= [];
        for(var i=0;i<10;i++){
          arr.push("<p id=&#39;nep&#39;>"+i+"</p>");
        }
        $("#panel").html(function(){
          return arr.join("<br/>");
        });
      });
      //为动态创建的html标签元素添加事件
      $("#nep").live("click",function(){
        var that=$(this);//获取当前点击的this对象
        console.log(that.text());
      });
    </script>
  </body>
</html>

登入後複製

運行結果：

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7801

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1236

Related knowledge

win11新增硬碟教學 Jan 05, 2024 am 09:39 AM

在購買電腦的時候，不一定會選擇很大的硬碟，這時候如果我們想在win11新增硬碟，可以先安裝購買的新硬碟，然後在電腦裡新增分割區就可以了。 win11新增硬碟教學：1、首先，我們拆開主機，找到硬碟的插槽。 2.找到後，我們先接上“數據線”，一般會有防呆設計，插不進去反個方向即可。 3.隨後將新的硬碟插入硬碟插槽。 4.插入後，將資料線的另一頭接到電腦的主機板上。 5.安裝完成後，就可以裝回主機，並開機了。 6.開機後，我們右鍵“此電腦”，開啟“電腦管理”7、開啟後，點選左下角的“磁碟管理”8、隨後在右邊可以

米家怎麼加電視 Mar 25, 2024 pm 05:00 PM

許多用戶在現代生活中越來越青睞小米智慧家庭互聯的電子生態，那麼連接米家APP後，你就可以輕鬆用手機來控制連接設備，但是很多用戶們還不知如何將自己的家居添加米家app中，那麼這篇教學攻略將為大家帶來具體連接方法步驟攻略，希望能幫助到各位有需要的小夥伴們。 1.下載米家APP後，建立或登入小米帳號。 2.添加方法：當全新的設備通電後，將手機靠近設備並打開小米電視，正常情況下會彈出連接提示，選擇“確定”即進入設備連接流程。若無提示彈出，也可以手動新增設備，方法是：進入智慧型家庭APP後，點選左下方第1

Win11快速建立桌面捷徑的教學課程 Dec 27, 2023 pm 04:29 PM

在win11中，我們可以透過新增桌面捷徑的方法在桌面上快速啟動軟體或文件，而且只需要右鍵需要的文件就可以操作了。 win11新增桌面捷徑：1、開啟“此電腦”，找到你想要新增桌面捷徑的檔案或軟體。 2、找到後，右鍵選取它，點選「顯示更多選項」3、再選擇「傳送到」-「桌面捷徑」4、操作完成後，就可以在桌面上找到捷徑了。

在MetaMask錢包中如何連接到Polygon網路？ MetaMask錢包連接到Polygon網路的教學指南 Jan 19, 2024 pm 04:36 PM

如何新增PolygonMainnet網路要將MATIC（Polygon）與Metamask連結使用，您需要新增一個名為「PolygonMainnet」的專用網路。使用錯誤的網路位址進行轉入會導致出現問題，所以在轉出$MATIC之前，請務必使用「PolygonMainnet」網路。 Metamask錢包預設連接到以太坊主網，但我們可以很簡單地添加“PolygonMainnet”並使用$MATIC。只需簡單的複製和貼上幾個步驟，就能完成。首先，在Metamask錢包中，點擊右上角的網路選項，選擇「C

Tampermonkey怎麼加入新腳本-Tampermonkey怎麼刪除腳本 Mar 18, 2024 pm 12:10 PM

Tampermonkey油猴Chrome擴充功能是一款使用者腳本管理插件，透過腳本提高了使用者的效率和瀏覽體驗，那麼Tampermonkey要怎麼加入新腳本呢？怎麼刪除腳本呢？下面就讓小編給大家解答吧!Tampermonkey怎麼加入新腳本：1、這裡拿GreasyFork來舉例子，打開GreasyFork網頁，輸入要按照的腳本，小編這裡選擇的一鍵離線下載2、選擇一個腳本，進入腳本頁面後可以看到安裝此腳本的按鈕3、點選安裝此腳本，來到安裝介面。這裡點擊安裝就可以了4、我們可以在以安裝的腳本中看到安裝好的一鍵

Outlook卡在新增帳戶[修復] Mar 23, 2024 pm 12:21 PM

當您在Outlook中新增帳戶時遇到問題時，可以嘗試以下解決方案來解決。通常這可能是由網路連線故障、使用者設定檔損壞或其他暫時性問題引起的。透過本文提供的方法，您可以輕鬆解決這些問題，確保您的Outlook能夠正常運作。 Outlook卡在新增帳戶如果您的Outlook在新增帳戶時卡住，請使用下面提到的這些修復程式：中斷並重新連接網路暫時停用防毒軟體建立新的Outlook設定檔嘗試在安全模式下新增帳戶停用IPv6運行Microsoft支援和恢復助理修復辦公室應用程式Outlook新增帳戶需

Java數組添加元素的常用方法 Feb 21, 2024 am 11:21 AM

Java陣列新增元素的常用方法，需要具體程式碼範例在Java中，陣列是一種常見的資料結構，可以儲存多個相同類型的元素。在實際開發中，我們經常需要在數組中添加新的元素。本文將介紹Java中陣列新增元素的常用方法，並提供具體的程式碼範例。使用循環建立新數組一個簡單的方法是建立一個新的數組，將舊數組的元素複製到新數組中，並添加新的元素。程式碼範例如下：//原始數組i

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

See all articles

JS為動態建立的元素新增事件

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題