jQuery TypeError: $(...) is null error in firebug 但代码适用于 jsFiddle

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14203125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:21:46  来源:igfitidea点击:

TypeError: $(...) is null error in firebug but code works on jsFiddle

jquerytypeerrorblackboard

提问by Renée Higgs

You can see my js (and associated html and css) at: http://jsfiddle.net/twsx7/9/

您可以在以下位置查看我的 js(以及相关的 html 和 css):http: //jsfiddle.net/twsx7/9/

I am working on a tweak to work with Blackboard Learn 9.1 (so if anyone has experiencing with the learning management system, or with the tweaks building block they might have some clue already as to why I am getting this problem).

我正在对 Blackboard Learn 9.1 进行调整(因此,如果有人使用过学习管理系统或调整构建块,他们可能已经知道为什么我会遇到这个问题)。

The change I am making involves checking what course theme is applied and then adding a class to a table based on that so that the table is styled to match the theme.

我所做的更改涉及检查应用了哪些课程主题,然后根据该主题将类添加到表格中,以便表格的样式与主题相匹配。

When i run this on our server I get the error $(...) is nullwhen it reaches var theme_id = $(".current").attr("id");. The rest of the JS works (note that the top section of the JS is normally another file that's included on the page, couldn't link it to jsfiddle as its on an authenticated server)

当我在我们的服务器上运行它时,我收到错误$(...) is null当它到达var theme_id = $(".current").attr("id"); . JS 的其余部分有效(请注意,JS 的顶部通常是页面中包含的另一个文件,无法将其链接到 jsfiddle,因为它位于经过身份验证的服务器上)

My contributions to this file are (and where the code is failing):

我对这个文件的贡献是(以及代码失败的地方):

line 242

第242行

$unitMap.addClass(getTheme());

lines 381 - 385

第 381 - 385 行

function getTheme() {
    var theme_id = $(".current").attr("id"); // error occurs this line
    var theme = $("#"+theme_id).find("a").html();
    return theme.toUpperCase();
}

This is my first attempt at jQuery so one of my concerns is that I'm using the wrong syntax for the version of jQuery the code was written with.

这是我对 jQuery 的第一次尝试,所以我担心的一个问题是我对编写代码的 jQuery 版本使用了错误的语法。

I located the following within the code when you select to include a tweak:

当您选择包含调整时,我在代码中找到了以下内容:

<script src='/webapps/qut-tweakbb-BBLEARN/jquery.js' type='text/javascript'></script><script src='/webapps/qut-tweakbb-BBLEARN/jquery.tweakSetup.js' type='text/javascript'></script>

The code in the top of the jsFiddle is from jquery.tweakSetup.js

jsFiddle 顶部的代码来自jquery.tweakSetup.js

I am hoping I've just used the wrong markup for the version of jQuery (though I can't seam to find whatversion the original code was written in) any advice would be greatly appreciated.

我希望我刚刚为 jQuery 版本使用了错误的标记(尽管我无法找到原始代码是用哪个版本编写的)任何建议将不胜感激。

回答by Bram Vanroy

  1. Make sure jQuery is loaded before you run your custom script
  2. Did you copy your code from JSFiddle and then used it immediately? Fiddle code has the habit to be corrupt. The ;is often defined as an invalid character. Remove it and retype it yourself.
  1. 确保在运行自定义脚本之前加载了 jQuery
  2. 您是否从 JSFiddle 复制了您的代码,然后立即使用了它?小提琴代码有被破坏的习惯。在;通常被定义为无效的字符。删除它并自己重新键入。

ADDED: 3. As John Fontaine pointed out, it is possible that jQuery conflicts with another library. To bypass this, you canuse jQuery noConflict mode. The documentationis quite clear on this, but I'll give some examples, just in case.

添加: 3. 正如 John Fontaine 所指出的,jQuery 可能与另一个库发生冲突。要绕过这一点,您可以使用 jQuery noConflict 模式。该文件是对这个很清楚,但我会举一些例子,以防万一。

The best methods are the following, or at least that is my preference:

最好的方法如下,或者至少这是我的偏好:

Use another variable instead of $, such as $j. By doing so, it is clear to you and to any other revisor of your code that this code depends on another library than $.

使用另一个变量代替$,例如$j。通过这样做,您和您的代码的任何其他修订者都清楚此代码依赖于另一个库而不是$.

Example:

示例

var $j = jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function () {
  var secondary = $j("#secondary-footer");
  secondary.hide().addClass("fixed").fadeIn("fast");

  $j(window).scroll(function () {
    if (secondary.offset().top >= ($j(document).height() - 350)) {
      secondary.removeClass("fixed");
    } else if (secondary + ":not('.fixed')") {
      secondary.addClass("fixed");
    }
  });
});

The "danger" of this method is that you might forget to use this variable sometimes. What you can do is start of by using the normal dollar sign and when you have finished, do a find of replace.

这种方法的“危险”在于你有时可能会忘记使用这个变量。您可以做的是从使用正常的美元符号开始,完成后,进行查找替换。

Possibly the most straight-forward method:

可能是最直接的方法:

jQuery(function ($) {
  var secondary = $("#secondary-footer");
  secondary.hide().addClass("fixed").fadeIn("fast");

  $(window).scroll(function () {
    if (secondary.offset().top >= ($(document).height() - 350)) {
      secondary.removeClass("fixed");
    } else if (secondary + ":not('.fixed')") {
      secondary.addClass("fixed");
    }
  });
});

This allows you to use jQuery in that block, i.e. the block that starts with jQuery(function ($) {and ends with });.

这允许您在该块中使用 jQuery ,即以 开头jQuery(function ($) {和结尾的块});

回答by John Fontaine

Blackboard Learn uses the prototypejs http://www.prototypejs.org/library on most pages. If you want to use JQuery scripts and plugins you must use no-conflict mode and invoke your $('') style calls as JQuery('') calls instead. See JQuery docs at http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Blackboard Learn在大多数页面上使用prototypejs http://www.prototypejs.org/库。如果您想使用 JQuery 脚本和插件,您必须使用无冲突模式并将您的 $('') 样式调用改为 JQuery('') 调用。请参阅http://docs.jquery.com/Using_jQuery_with_Other_Libraries 上的JQuery 文档

回答by Yuvraj Singh Shekhawat

I have several scripts running on same page using jQuery.noConflict();

我有几个脚本使用jQuery.noConflict()在同一页面上运行

var $j = jQuery.noConflict();

function getTheme() {
    var theme_id = $j(".current").attr("id"); // error occurs this line
    var theme = $j("#"+theme_id).find("a").html();
    return theme.toUpperCase();
}

just use $jwhere $or you can use create more by using jQuery.noConflict()

只需使用$jwhere $或者您可以使用jQuery.noConflict()创建更多