从 $.get 中调用时，jQuery 插件变得未定义

发布于 2024-12-16 12:16:39 字数 1588 浏览 1 评论 0原文

我正在使用 jQuery TokenInput，并且我的代码中有一个地方我想在实际调用 TokenInput 之前进行 Ajax 调用。但是，如果我尝试从 $.get 中调用 TokenInput 我得到

未捕获的类型错误：对象#<对象>；没有方法“tokenInput”

所以这有效：

$("#myfield").tokenInput('/search/', {
    tokenLimit: 3
});
$("#myfield").tokenInput("add", { id: 100, name: "Fake Data" });

但这不起作用：

var old_value = $("#myfield").val();
$("#myfield").tokenInput('/search/', {
    tokenLimit: 3
});
$.get('/search/', { q: old_value }, function (data) {
    record = data[0];
    $("#myfield").tokenInput("add", {id: record.id, name: record.name });
});

所以我想我想知道的是，$.tokenInput 发生了什么？我可以做些什么来确保它可以从 $.get 中使用吗？

jQuery.TokenInput 的源代码：https:/ /github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js

更新

哦horsefeathers。查看代码，我发现另一部分代码（在本例中，来自 django-cms）正在引入不同版本的 jQuery。这不是是我的$.get请求的结果，它只是在页面的另一部分。

不过，我不明白的是：为什么它在一种情况下有效，但在另一种情况下却不起作用？当我们到达 $.tokenInput 代码时，两个 jQuery 版本都已加载。那么 $ 发生了什么才能保留 .tokenInput 呢？

另外，我认为有一种方法可以在一个页面上拥有两个版本的 jQuery，并且不会遇到问题——一个版本的 jQuery 会以某种方式“保留”另一个版本。显然它可以部分完成，因为 $.tokenInput 有时确实可以工作。

幸运的是，在这个页面上，我能够禁用调用其他 jQuery 的模块，但我并不总是能够这样做。鉴于我无法避免页面上有两个版本，我可以采取哪些步骤来处理这种情况？（django-cms 仅与旧版本的 jQuery 兼容。非常烦人，但我对此无能为力）。

原文

I'm using jQuery TokenInput and there's a place in my code where I'd like to do an Ajax call prior to actually calling TokenInput. However, if I try to call TokenInput from within $.get I get

Uncaught TypeError: Object #<Object> has no method 'tokenInput'

So this works:

$("#myfield").tokenInput('/search/', {
    tokenLimit: 3
});
$("#myfield").tokenInput("add", { id: 100, name: "Fake Data" });

But this doesn't work:

var old_value = $("#myfield").val();
$("#myfield").tokenInput('/search/', {
    tokenLimit: 3
});
$.get('/search/', { q: old_value }, function (data) {
    record = data[0];
    $("#myfield").tokenInput("add", {id: record.id, name: record.name });
});

So I guess what I'm wondering is, what happened to $.tokenInput? Is there something I can do to ensure it's available from within $.get?

Source code for jQuery.TokenInput: https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js

Update

Oh horsefeathers. Looking at the code I see that another section of code (in this case, from django-cms) is pulling in a different version of jQuery. This is not as a result of my $.get request, it's just on another part of the page.

Here's what I don't get, though: why does it work in one context but not the other? Both jQuery versions are already loaded by the time we get to the $.tokenInput code. So what is happening to $ so that it retains .tokenInput?

Also, I thought that there was a way to have two versions of jQuery on a single page and not run into problems -- that one version of jQuery will somehow "preserve" the other version. Obviously it's able to do it partially, since $.tokenInput does work some of the time.

Fortunately on this page I was able to just disable the module that calls the other jQuery, but I won't always be able to. What steps can I take to deal with this situation, given that I cannot avoid having two versions on the page? (django-cms is only compatible with an older version of jQuery. Very annoying, but nothing I can do about it).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南城追梦 2024-12-23 12:16:39

相对于问题而言。

这不是对问题的直接回答，而是关于杀死 jQuery 插件的一般事实。我遇到了如下所述的问题，在谷歌搜索后我最终找到了这里，所以也许有人也会。

将

有害脚本：

// Here html response has full index.php body,
// i.e. html has <body /> and <script /> tags inside
// (including `<script src="js/jquery.js">`).
$.get(url).done(function(html)
{
    // Here happens redeclaration of jQuery variable (i.e. $ variable),
    // because of `<script src="js/jquery.js">` inside `<body />`.
    // 
    // Redeclaration of jQuery variable mean
    // that all plugins will die (i.e. all
    // not native jQuery attributes become undefined).
    $(html).appendTo("body");
});

编辑：

另一个例子：

$("<html />").html("<script src='js/jquery.js'></script>");

将加载jquery.js。

需要注意的是：像这样注入的脚本将通过ajax（即XMLHttpRequest）加载。

注意：所有这些都在 Chrome 中进行了测试，但是有关 html 解析的 jQuery 行为不跨浏览器：

“当传递复杂的 HTML 时，某些浏览器可能不会生成完全复制如前所述，我们使用浏览器的 .innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中在此过程中，某些浏览器会过滤掉某些元素，例如、</code> 或 <code><head></code> 元素。</strong> 因此，插入的元素可能会不代表传递的原始字符串。”</em>

源

Relative to the problem.

This is not a direct anwser to the question, but general fact about killing jQuery plugins. I've had a problem as described below and after googling it I ended up here, so maybe someone will too.

Appending <script /> tags to the document will execute these scripts and possibly kill all your plugins inside $.

Harmful script:

// Here html response has full index.php body,
// i.e. html has <body /> and <script /> tags inside
// (including `<script src="js/jquery.js">`).
$.get(url).done(function(html)
{
    // Here happens redeclaration of jQuery variable (i.e. $ variable),
    // because of `<script src="js/jquery.js">` inside `<body />`.
    // 
    // Redeclaration of jQuery variable mean
    // that all plugins will die (i.e. all
    // not native jQuery attributes become undefined).
    $(html).appendTo("body");
});

edit:

Another example:

$("<html />").html("<script src='js/jquery.js'></script>");

will load jquery.js.

Thing to note: scripts injected like this will be loaded via ajax (i.e. XMLHttpRequest).

Note: all of this was tested in Chrome, but jQuery behaviour regarding html parsing is not cross-browser:

"When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, we use the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <html>, <title>, or <head> elements. As a result, the elements inserted may not be representative of the original string passed."

source

回复收藏 0 原文