Question

 jQuery(document).ready(function() {
     jQuery("#bfCaptchaEntry").on("click", function(){
         jQuery("#bfCaptchaEntry").css("background-color", "#FFFFFF"); 
     });
     jQuery("#bfCaptchaEntry").on("blur", function(){           
         jQuery("#bfCaptchaEntry").css("background-color", "#CC0000"); 
     });
 });

This is the code, it’s supposed to add the onclick and onblur functions to change the background colors of my input field but it doesn’t work.

jQuery code is being loaded before this script and this script is being loaded in a separate file inside the html after it.

What did I do wrong? Any help is appreciated.

EDIT: After trying everything in the answers, I tried Chase’s suggestion in the comments.
it worked like a charm! So the final code is now an inline script after the jQuery is loaded and it’s like this:

jQuery(document).ready(function() {
jQuery("#bfCaptchaEntry").bind("click", function(){ 
jQuery("#bfCaptchaEntry").css("background-color", "#FFFFFF"); });
jQuery("#bfCaptchaEntry").bind("blur", function(){ 
jQuery("#bfCaptchaEntry").css("background-color", "#CC0000"); });
});

Answer 1

I would suggest using .bind() instead of .on() for versions prior to 1.7.

"As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers."

api.jquery.com/on/