调试一个简单的jQuery函数;想知道是否与其他代码冲突

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

本文关键字：是否 想知道 其他 冲突 代码 函数 jQuery 一个 简单 调试      更新时间：2023-09-26
 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"); 
     });
 });

这是代码，它应该添加 onclick 和 onblur 函数来更改我的输入字段的背景颜色，但它不起作用。

jQuery 代码在此脚本之前加载，此脚本加载到它之后的 html 中的单独文件中。

我做错了什么？任何帮助，不胜感激。

编辑：在尝试了答案中的所有内容后，我在评论中尝试了Chase的建议。它就像一个魅力！所以最终的代码现在是加载jQuery后的内联脚本，它像这样：

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

你在加载 jQuery 之前加载依赖 jQuery 的脚本。

  <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>

相反，把jQuery放在第一位;

  <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>

我建议对 1.7 之前的版本使用 .bind() 而不是 .on()。

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

api.jquery.com/on/

你首先包含jQuery文件了吗？如果您已经这样做了，请在浏览器中按 F12 并检查您是否在浏览器的控制台部分看到任何错误。

另外，您是否正在使用其他JavaScript库..？

在尝试了答案中的所有内容后，我在评论中尝试了Chase的建议。 它就像一个魅力！所以最终的代码现在是加载jQuery后的内联脚本，它像这样：

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"); });
});
相关文章：