search

Home >Web Front-end >JS Tutorial >jquery append dynamically added element event on does not work solution_jquery

jquery append dynamically added element event on does not work solution_jquery

WBOY
WBOYOriginal
2016-05-16 15:48:091367browse

It is easy to add new elements with jquery. How should we solve the problem that the on event of dynamically added elements in jquery append does not work? In the on method, you must first find the original selector (such as .info), and then find the dynamically added selector (such as column.delete).

I won’t go into details anymore, please look at the code below. 

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

The above code is this article’s solution to the problem that the element event on dynamically added by jquery append does not work. I hope it will be helpful to everyone’s learning.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Points to note when using recursive functions in JavaScript_Basic knowledgeNext article：Points to note when using recursive functions in JavaScript_Basic knowledge

Related articles

See more