Skip to content

Instantly share code, notes, and snippets.

@JuniorMSG

JuniorMSG/01_JS_01_DYNAMIC TAG EVEN.html

Last active May 7, 2021 14:25
Show Gist options
  • Save JuniorMSG/26b832b495278c08bcf0d383577e150d to your computer and use it in GitHub Desktop.
Save JuniorMSG/26b832b495278c08bcf0d383577e150d to your computer and use it in GitHub Desktop.
Download ZIP
JS_01_DYNAMIC TAG EVENT.html
Raw
01_JS_01_DYNAMIC TAG EVEN.html
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
/*
* 기본 이벤트 걸기
*/
$("[id=btn1]").on("click", function(){
var wrap = $(this).parent()
var clone = $(this).clone()
clone[0].value += 1
wrap.append(clone)
})
/*
* 복수 이벤트 걸기
*/
$("[id^=btn]").on("click", function(){
var wrap = $(this).parent()
var clone = $(this).clone()
clone[0].value += 1
wrap.append(clone)
})
/*
* 동적(영역) + 복수 이벤트 걸기
*/
$("#wrap1").on("click", "[id^=btn]", function(){
var wrap = $(this).parent()
var clone = $(this).clone()
clone[0].value += 1
wrap.append(clone)
})
/*
* 동적(전체) + 복수 이벤트 걸기
*/
$(document).on("click", "[id^=btn]", function(){
var wrap = $(this).parent()
var clone = $(this).clone()
clone[0].value += 1
wrap.append(clone)
})
/*
* 사용자 지정태그로 특정 값일때 특정 이벤트 실행하기
*/
$(document).find("[data-ref]").each(function(e){
if($(this).attr("data-ref") == "iron"){
$(this).on("click", function(){
console.log("I'm iron Man");
})
}else if($(this).attr("data-ref") == "good"){
$(this).on("click", function(){
alert("I'm good Man");
})
}
})
});
</script>
</head>
<body>
<div id="wrap1">
<input type="button" id="btn1" name="btn1" class="btn1" value="1">
</div>
<br><br>
<div id="wrap2">
<input type="button" id="btn2" name="btn2" class="btn2" value="2">
</div>
<br><br>
<div id="wrap3">
<input type="button" id="btn1" name="btn1" class="btn1" value="1" data-ref="iron">
</div>
<br><br>
<div id="wrap4">
<input type="button" id="btn2" name="btn2" class="btn2" value="2" data-ref="good">
</div>
</body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment