调试jQuery插件

Question

背景

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

我正在加载的一个脚本是Twitter's bootstrap JS来创建一个模态窗口。它是作为jQuery插件实现的，并将'$ .modal（）'添加到jquery对象。

问题

这适用于除一个客户网站之外的所有网站。在此特定网站上，当我调用$('#idOfWindow').modal();时，该页面会引发javascript错误Object has no method 'modal'

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

评论

我目前正在使用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＆amp; prototype）的问题。确保要添加$.fn.modal的jQuery版本与要调用的版本相同。 $().jquery可用于访问正在使用的特定版本的jQuery。