CODEWITHSUNDEEP
javascriptjqueryhtml
Claudio Delgado
Claudio Delgado

Reputation: 2349

Debugging a simple jQuery function; wondering if there's a conflict with another code?

 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"); });
});

Upvotes: 0

Views: 97

Answers (4)

Chase
Chase

Reputation: 29549

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/

Upvotes: 1

Claudio Delgado
Claudio Delgado

Reputation: 2349

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"); });
});

Upvotes: 0

Matt
Matt

Reputation: 75317

You're loading your jQuery-reliant scripts before jQuery has loaded.

  <script src="/templates/e-pasaporthome/javascript/styleForms.js" type="text/javascript"></script>
  <script src="/media/mod_vt_nivo_slider/js/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  <script src="/media/mod_vt_nivo_slider/js/jquery.nivo.slider.min.js" type="text/javascript"></script>

Instead, put jQuery first;

  <script src="/media/mod_vt_nivo_slider/js/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  <script src="/templates/e-pasaporthome/javascript/styleForms.js" type="text/javascript"></script>
  <script src="/media/mod_vt_nivo_slider/js/jquery.nivo.slider.min.js" type="text/javascript"></script>

Upvotes: 3

Sushanth --
Sushanth --

Reputation: 55750

Have you included the jQuery file in the first place.. If you have done so then Hit the F12 in your browser and check to see if you see any errors in the console section of the browser..

Also are you using another javascript libraries..?

Upvotes: 1

Related Questions