调试jQuery插件

Question

背景

我有一段javascript代码，可以在客户页面上找到。执行此脚本时，它加载必要的资产和脚本，然后执行主代码。

我正在加载的脚本之一是Twitter的引导JS，用于创建模式窗口。它被实现为一个jQuery插件，并将"$.modal()"添加到一个jQuery对象中。

问题

这适用于除一个客户站点以外的所有客户站点。在这个特定的站点上，当我调用$('#idOfWindow').modal();时，页面抛出一个javascript错误Object has no method 'modal'

我已经验证了引导程序代码被调用，并且$.fn.modal被调用来设置插件，我的预感是有什么东西正在破坏jQuery对象，但我不知道如何调试它。

评论

我目前正在使用Chrome的开发工具进行调试，并且我已经验证了插件在被调用之前已经加载并执行。客户端站点正在使用jQuery 1.7.2。我熟悉chrome工具，但我不是一个超级用户。

Answer 1

如果您是对的，您的原始jQuery对象在某个地方被覆盖，您应该能够使用jQuery.noConflict()恢复它。

演示：jsfiddle.net/KthZu

---

编辑：一些调试提示：

为了帮助调试，您可以在控制台中使用以下代码检查jQuery版本：

$().jquery

另一个潜在的调试技巧是在创建插件时存储对jQuery的引用。

$.fn.myPlugin = function(){};
window.jQueryWithMyPlugin = $;

然后，在调试时，您可以清楚地看到window.$是否已被覆盖：

$ === jQueryWithMyPlugin

Answer 2

通常，对于任何要从外部嵌入的小部件类型的代码，您都需要包装您的代码：

(function($){
$('#idOfWindow').modal();
})(jQuery);

Answer 3

我过去曾遇到过在同一页面上加载多个版本的jQuery(或jQuery&prototype)的问题。请确保将$.fn.modal添加到的jQuery版本与正在调用的版本相同。$().jquery可用于访问正在使用的jQuery的特定版本。