suchen

Heim  >  Artikel  >  Web-Frontend  >  JQuery-Ereignis zum Anhängen eines dynamisch hinzugefügten Elements funktioniert nicht. Solution_JQuery

JQuery-Ereignis zum Anhängen eines dynamisch hinzugefügten Elements funktioniert nicht. Solution_JQuery

WBOY
WBOYOriginal
2016-05-16 15:48:091334Durchsuche

Es ist einfach, mit jquery neue Elemente hinzuzufügen. Wie können wir das Problem lösen, dass das Anhängen dynamisch hinzugefügter Elemente in jquery nicht funktioniert? Bei der on-Methode müssen Sie zuerst den ursprünglichen Selektor (z. B. .info) und dann den dynamisch hinzugefügten Selektor (z. B. Column.delete) finden.

Ich werde nicht mehr auf Details eingehen, schauen Sie sich bitte den Code unten an. 

<!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>

Der obige Code ist die Lösung dieses Artikels für das Problem, dass das durch jquery append dynamisch hinzugefügte Elementereignis nicht funktioniert. Ich hoffe, dass es für das Lernen aller hilfreich ist.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zu beachtende Punkte bei der Verwendung rekursiver Funktionen in JavaScript_GrundkenntnisseNächster Artikel：Zu beachtende Punkte bei der Verwendung rekursiver Funktionen in JavaScript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen