페이지로드시 이벤트 리스너를 안정적으로 추가 할 수 없습니다.

Question

페이지로드시 이러한 이벤트 리스너를 안정적으로 추가 할 수 없습니다. 일부 청취자는 처음부터 작동하지만 일부는 몇 번의 클릭만으로 작동합니다. 무엇이 잘못 되었을까요? 문제는 내가 jQuery와 네이티브 JS를 혼합하는 것일까?

<script> 
$(document).ready(function() { 

function resetValidation() { 
    jQuery('#contact-form').validate().resetForm(); 
}; 

function resetFormFields() { 
    document.getElementById('contact-form').reset(); 
}; 

function removeValidationClasses() { 
    jQuery('.control-group').removeClass('success').removeClass('error'); 
}; 

function changeHeaderToAdd() { 
    document.getElementById('contactModalLabel').innerText = 'Add Contact'; 
}; 

function changeHeaderToUpdate() { 
    document.getElementById('contactModalLabel').innerText = 'Update Contact'; 
}; 

function clearContactId() { 
    document.getElementById('contactId').value = ''; 
}; 

    var ab = document.getElementById('addContactBtn'); 
    if (ab.addEventListener) { 
    ab.addEventListener('click', resetValidation, false); 
    ab.addEventListener('click', resetFormFields, false); 
    ab.addEventListener('click', removeValidationClasses, false); 
    ab.addEventListener('click', changeHeaderToAdd, false); 
    ab.addEventListener('click', clearContactId, false); 
    } else { 
    ab.attachEvent('onclick', resetValidation); 
    ab.attachEvent('onclick', resetFormFields); 
    ab.attachEvent('onclick', removeValidationClasses); 
    ab.attachEvent('onclick', changeHeaderToAdd); 
    ab.attachEvent('onclick', clearContactId); 
    }; 
    var ub = document.getElementById('updateContactBtn'); 
    if (ub.addEventListener) { 
    ub.addEventListener('click', resetValidation, false); 
    ub.addEventListener('click', resetFormFields, false); 
    ub.addEventListener('click', removeValidationClasses, false); 
    ub.addEventListener('click', changeHeaderToUpdate, false); 
    } else { 
    ub.attachEvent('onclick', resetValidation); 
    ub.attachEvent('onclick', resetFormFields); 
    ub.attachEvent('onclick', removeValidationClasses); 
    ub.attachEvent('onclick', changeHeaderToUpdate); 
    }; 
}); 
</script> 

Answer 1

해결!

JS 괜찮 았어. 그러나 #updateContactBtn (페이지의 각 연락처마다 하나씩)이 동적으로 만들어 졌기 때문에 문제는 고유하지 않은 ID가 있음으로 인해 발생했습니다. #updateContactBtn의 첫 번째 인스턴스 만 작동했습니다.

#updateContactBtn을 .updateContactBtn으로 변경했습니다.