선장님
아래 코드처럼 body안에 코드를 짜서 class가 add인 버튼을 누르면 콘솔창에 1이 잘 출력이됩니다. 근데 $('.add').on('click',()=>{console.log(1)})}) <--이 친구를 get안에서 지우고 밖으러 꺼내면 add버튼을 눌러도 콘솔창에 1이 출력이 안됩니다.
이유를 모르겠습니다. 알려주시면 감사하겠습니다. 사랑합니다.
<script>
let products=[];
$.get('store.json').then((data)=>{
products=data.products
for(i=0;i<products.length;i++){
var pro=products[i]
var a=`<div class="col-3 box-content">
<div class="box-in">
<div class="img-container">
<img src="/img/${pro.photo}" alt="">
</div>
<p class='fw-bold fs-4'>${pro.title}</p>
<p>${pro.brand}</p>
<p>가격:${pro.price}</p>
<button class="btn add">담기</button>
</div>
</div>`
$('.img-box').append(a)
}
$('.add').on('click',()=>{
console.log(1)})
})
$('#search').on('input',()=>{
var b=$('#search')
$('.img-box').html('')
for(i=0;i<products.length;i++){
var pro=products[i]
if(b.val().includes(pro.title)||b.val().includes(pro.brand)){
var a=`<div class="col-3 box-content">
<div class="box-in">
<div class="img-container">
<img src="/img/${pro.photo}" alt="">
</div>
<p class='fw-bold fs-4'>${pro.title}</p>
<p>${pro.brand}</p>
<p>가격:${pro.price}</p>
<button class="btn add">담기</button>
</div>
</div>`
$('.img-box').append(a)
}
}
})
</script>
