简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

jquery append 動態新增的元素事件on 不起作用的解決方案_jquery

WBOY
發布： 2016-05-16 15:48:09
原創
1311 人瀏覽過

用jquery新增元素很容易，面對jquery append 動態新增的元素事件on 不起作用我們該如何解決呢？ on方法中要先找到原選擇器（如例.info),再找到動態新增的選擇器（如列.delete)。

具體不多說了，請看下面的程式碼吧。 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<script type="text/javascript"
src="../resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//动态添加
$(".add").on("click",function(){
console.log("进来了");
$(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
});
 //对动态添加的元素添加事件-删除
$(".info").on("click",".delete",function(){
console.log("进来了Delete！");
$(this).remove();
});
 }); 
</script>
 </head>
<body>
 <h2 class='add'>单击我添加动态元素</h2>
 <div class="info"></div>
 </body>
</html>
登入後複製

以上程式碼就是本文對jquery append 動態新增的元素事件on 不起作用的解決方案，希望對大家學習有所幫助。

相關標籤：
jquery动态添加元素 jquery_append事件
來源：php.cn
上一篇：javascript中遞歸函數用法注意點_基礎知識 下一篇：理解javascript中的原型和原型鏈
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用opentbs產生odt檔案時遇到的問題：相同key的值顯示在同一行而不是單獨的欄位中。 我正在使用一個名為OpenTbs的庫來使用PHP建立odt，我使用它是因為動態生成列和行。我知道如何建立行和列，但我不知道如何組織它們。讓我加入一個例子：所以首先我會將其添加到我的...
來自於 2024-04-06 20:18:18
0
1
483
工具提示中的 Highcahrts 連結和按鈕不起作用 我正在嘗試從工具提示內部觸發單擊事件。我將帶有單擊事件的按鈕放置在其中，但它不起作用。我還嘗試在工具提示內添加外部連結。它也不起作用。我能夠取得元素的樣式，但不能取得觸發的點擊事件...
來自於 2024-04-04 22:01:46
0
1
1352
新增到MySQL中的json 如何在mySQL中為json變數新增元素由此：值=['123']做這個：值=['123','456']
來自於 2024-04-04 19:17:30
0
1
352
修訂後的標題：根據複選框選擇計算總計 我正在開發一個簡單的財務追蹤應用程式。在應用程式中，有一個包含所有支出帳單的表格，然後是位於表格外部的總金額。我正在嘗試找到一種使用JS或AJAX的方法，以便當我選擇表行中的1個複...
來自於 2024-04-04 13:45:50
0
1
3465
具有未知選擇器和子項目的 Javascript 事件委託 我有一個動態選擇器（linkTrigger），它應該可以捕捉元素上的點擊。我不知道linkTrigger可能是什麼，也不知道它是否會有一些孩子。當我使用jQuery時，一切都很好。...
來自於 2024-04-03 23:39:19
0
1
420
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！