jquery append 動(dòng)態(tài)添加的元素事件on 不起作用的解決方案

更新時(shí)間：2015年07月30日 15:48:25 作者：機(jī)器有毒

這篇文章主要介紹了jquery append 動(dòng)態(tài)添加的元素事件on 不起作用的解決方案,需要的朋友可以參考下

用jquery添加新元素很容易，面對(duì)jquery append 動(dòng)態(tài)添加的元素事件on 不起作用我們?cè)撊绾谓鉀Q呢？on方法中要先找到原選擇器（如例.info),再找到動(dòng)態(tài)添加的選擇器（如列.delete)。

具體不多說(shuō)了，請(qǐng)看下面的代碼吧。

<!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>測(cè)試</title>
<script type="text/javascript"
src="../resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//動(dòng)態(tài)添加
$(".add").on("click",function(){
console.log("進(jìn)來(lái)了");
$(".info").append('<div class="delete"><h3>單擊我來(lái)刪除我</h3></div>');
});
 //對(duì)動(dòng)態(tài)添加的元素添加事件-刪除
$(".info").on("click",".delete",function(){
console.log("進(jìn)來(lái)了Delete！");
$(this).remove();
});
 }); 
</script>
 </head>
<body>
 <h2 class='add'>單擊我添加動(dòng)態(tài)元素</h2>
 <div class="info"></div>
 </body>
</html>

以上代碼就是本文對(duì)jquery append 動(dòng)態(tài)添加的元素事件on 不起作用的解決方案，希望對(duì)大家學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery中的大于等于(＞=)操作符使用技分享
在jQuery中,常常需要對(duì)元素的某個(gè)屬性或數(shù)值進(jìn)行比較,判斷是否大于等于某個(gè)特定的值,在這種情況下,使用大于等于（>=）操作符是非常常見的,本文將介紹如何在jQuery中使用大于等于操作符的技巧,需要的朋友可以參考下
2024-09-09
jQuery綁定自定義事件的魔法升級(jí)版
這篇文章主要介紹了jQuery綁定自定義事件使用技巧,通過(guò)循環(huán)綁定所有的自定義事件,在恰當(dāng)?shù)臅r(shí)機(jī)調(diào)用,需要的朋友可以參考下。
2016-06-06
jQuery中slideUp()方法用法分析
這篇文章主要介紹了jQuery中slideUp()方法用法,以實(shí)例形式分析了slideUp()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
使用jquery.form.js實(shí)現(xiàn)圖片上傳的方法
這篇文章主要介紹了使用jquery.form.js實(shí)現(xiàn)圖片上傳的方法,涉及jquery使用表單插件jquery.form.js進(jìn)行圖片上傳的提交、類型驗(yàn)證、執(zhí)行結(jié)果回調(diào)顯示等技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2016-05-05
簡(jiǎn)短幾句jquery代碼的實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換
短幾句jquery代碼實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換，需要的朋友可以參考下。
2011-09-09
淺談EasyUi ComBotree樹修改父節(jié)點(diǎn)選擇的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談EasyUi ComBotree樹修改父節(jié)點(diǎn)選擇的問(wèn)題。
2016-11-11
jQuery獲取文本節(jié)點(diǎn)之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個(gè)參數(shù)來(lái)賦值,那么它們有些什么區(qū)別?
2011-03-03
jQuery圖片輪播的具體實(shí)現(xiàn)
之前有碰到過(guò)jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)，這次的圖片輪播在原理上與之相同，只有一些細(xì)微的差別，就是需要在圖片的右下角顯示當(dāng)前圖片的序號(hào)
2013-09-09
Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡(jiǎn)潔，不容易出錯(cuò)。each()函數(shù)封裝了十分強(qiáng)大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等，在javaScript開發(fā)過(guò)程中使用$each可以大大的減輕我們的工作量。
2015-05-05
JQuery動(dòng)態(tài)生成的按鈕無(wú)法觸發(fā)問(wèn)題及完美解決方法
利用JQuery動(dòng)態(tài)添加的按鈕無(wú)法通過(guò)$(selector).click方法觸發(fā)點(diǎn)擊事件,下面小編給大家?guī)?lái)了JQuery動(dòng)態(tài)生成的按鈕無(wú)法觸發(fā)問(wèn)題與解決方法,需要的朋友可以參考下
2023-02-02