jquery가 동적으로 추가된 요소 이벤트를 추가하면 작동하지 않습니다.
- WBOY원래의
- 2016-05-16 15:48:091312검색
jquery를 사용하면 새 요소를 쉽게 추가할 수 있습니다. jquery 추가에서 동적으로 추가된 요소의 on 이벤트가 작동하지 않는 문제를 어떻게 해결해야 할까요? on 메소드에서는 먼저 원래 선택기(예: .info)를 찾은 다음 동적으로 추가된 선택기(예:column.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 추가에 의해 동적으로 추가된 요소 이벤트가 작동하지 않는 문제에 대한 이 기사의 솔루션입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.