[JavaScript] Ajax를 활용한 버튼 값 넘기기

ajax를 활용하여 버튼을 만든 후 변경된 코드로 인해 버튼이 안 눌러지는 현상이 생겼었습니다ㅎ....

새로 여러개의 버튼이 만듦으로써 원래의 class 값을 queryselectAll로 인식이 안 되는 이유였는데

삽질을 하루동안 한후 해결법을 찾아서 공유합니다^.ㅠ 

 

전의 코드

const reserveTimeWant = document.querySelectorAll('.reserve-time-want');
reserveTimeWant.forEach(list => {
    list.addEventListener('click', function() {
        const reserveTimeActive = document.querySelectorAll('.reserve-time-active');
        reserveTimeActive.forEach(li => {
            li.classList.remove('reserve-time-active');
        });
        console.log('reserve-time-active');
        list.classList.add('reserve-time-active');
        console.log(list.innerHTML);
        inputRunningTime.value = list.innerHTML;
    });
});

 

ajax를 활용하면 새로 만들어진 버튼의 class값을 queryselectAll가 인식을 못하게 됩니다.

 

해결법은 간단한데 버튼이 하나라면 

$(document).on('click', 'class or id값', function() {

의 코드로 해결이 가능하며 새로 생긴 버튼이 여러 개이면

$(document).on('click', '.reserve-time-want', function() {
    $(this).each(function(){

 

$(this).each(function() { 

코드를 추가함으로써 버튼을 누를 때 각각의 값들을 넘기게 됩니다. 

 

변경후 코드

 

$(document).on('click', '.reserve-time-want', function() {
    $(this).each(function(){
        const reserveTimeActive = document.querySelectorAll('.reserve-time-active');
        reserveTimeActive.forEach(li => {
            li.classList.remove('reserve-time-active');
        });
        this.classList.add('reserve-time-active');
        console.log(this.innerHTML);
        inputRunningTime.value = this.innerHTML;
        });
    });