无法在页面加载时可靠地添加事件侦听器

我似乎无法在加载页面时可靠地添加这些事件侦听器。一些听众从一开始就工作，但其他人只能在点击几下后才能工作。什么可能是错误的？问题是我在用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>

来源

2013-05-05 geeljire

但是你为什么要把它们混合在一起呢？如果你始终使用jQuery，你可以减少一些代码。 – techfoobar 2013-05-05 12:48:38

混合JS和jQuery是相当安全的sans可能会导致与$'操作符冲突的库，您可以尝试调用'noconflict'，但这看起来并不是问题。哪些事件是孩子的问题？还有@techfoobar说。 – Nomad101 2013-05-05 12:48:58

解决！

JS很好。但是，由于#updateContactBtn是动态创建的（页面上的每个联系人都有一个），所以问题是由于存在非唯一的标识。只有#updateContactBtn的第一个实例工作。

我将#updateContactBtn更改为.updateContactBtn。

来源

2013-05-06 22:08:33 geeljire

无法在页面加载时可靠地添加事件侦听器

回答

相关问题