질문드립니다.

[허수혁]

선장님

아래 코드처럼 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>  

[codingapple]

밖으로 꺼내면

.add라는 요소가 없는데 .add를 찾아서 이벤트리스너를 달라고 해서 그런듯요 

[허수혁]

선생님 이해가 잘 안가는데 조금만 자세히 설명해주실 수 있나요?

위에 get을 통해서 만들었고 이벤트 리스트너가 장착된 친구들은 한번만 읽는게 아니라 

이벤트가 발생할때 가져오는 형식이 아니었나여?

혹시 시간차 같은거 때문인가요?

[codingapple]

 $.get('store.json').then();

$('.add').on('click'

이렇게 2줄 코드 짜면 then 안의 코드보다 $('.add').on('click' 이게 먼저 실행됩니다 

[허수혁]

감사합니다

 

[글쓴이]

글