Question

我在两个内容非常相似的网页之间存在令人费解的差异。两个页面都加载了相同的脚本集：

<script type="text/javascript" src="scripts/modernizr.min.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js?v=1.8.3"></script>
<script type="text/javascript" src="scripts/jquery.colorbox.min.js"></script>
<script type="text/javascript" src="scripts/jquery.tools.min.js"></script>
<script type="text/javascript" src="scripts/URI.js"></script>

然后他们有$(document).ready()：

    $(document).ready(function () {
        $(".profileImage").tooltip({
            position: 'top right',
            relative: true,
            offset: [50, 0]
        }).dynamic();
    });

在一个页面上，这很好用。在另一页上，一旦事件触发我就会得到以下信息：

未捕获TypeError：$（...）。tooltip不是函数

在有效的页面上，我已经能够确定（通过暂停和踩踏）.tooltip()是jquery.tools.min.js的一部分

编辑/更新3 （删除了1和2，因为它们可能具有误导性）

这两个页面都来自应用程序的不同部分，这些部分实现了类似于在线论坛的内容

在一切正常的页面上，它只是来自论坛用户的消息，以及他们的头像图片。在不起作用的页面上，该页面还包括用javascript和html5编写的统计/图形绘制设备

我注意到，通过在调试器中每个页面document.ready中的同一点暂停，在有效的页面上，jQuery是版本1.8.3，来自jquery-tools的所有方法都可用于调用

在不起作用的页面上，jQuery版本为1.9.1

我的假设是，包括统计/条形图绘制设备已经完全取代了页面前面加载的jquery1.8.3 + jquery-tools库，使用了jquery1.9.1 + NO_TOOLS，因此选择器仍然可以工作的原因（jquery的但是.tooltip()函数（jquery-tools作业）现在不存在了

我不确定该如何处理它 - 有一个页面有自己的jquery设置，然后包括其他东西也使用和加载jquery（不同版本）等的正常解决方案是什么？

Answer 1

jQuery.fn.tooltip = null或jQuery.fn.tooltip = undefined或甚至delete jQuery.fn.tooltip会删除以下演示中降级的功能：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Reduxtagram</title>
</head>
<body>
<h1>messages</h1>
<div id="messages-placeholder"></div>
<h1>Errors</h1>
<div id="errors-placeholder"></div>

<script>

	function html(id, inner){
		var el = document.getElementById(id);
		el.innerHTML += inner + " ------------------- ";
	}
	function logError(error){
		html("errors-placeholder", error);
	}
	function logMsg(msg){
		html("messages-placeholder", msg);
	}
	var myNamespace= {};
	myNamespace.myFunctionToNull = function(){ 
		logMsg("myFunctionToNull was called");	
	};
	myNamespace.myFunctionToUndefined = function(){ 
		logMsg("myFunctionToUndefined was called");	
	};
	myNamespace.myFunctionToDelete = function(){ 
		logMsg("myFunctionToDelete was called");	
	};
	
	myNamespace.myFunctionToNull();
	myNamespace.myFunctionToUndefined();
	myNamespace.myFunctionToDelete();
	
	myNamespace.myFunctionToNull = null;
	myNamespace.myFunctionToUndefined = undefined;
	delete myNamespace.myFunctionToDelete;
	
	try{
		myNamespace.myFunctionToNull();
	}
	catch(e)
	{
		logError(e);
	}
	try{
		myNamespace.myFunctionToUndefined();
	}
	catch(e)
	{
		logError(e);
	}
	try{
		myNamespace.myFunctionToDelete();
	}
	catch(e)
	{
		logError(e);
	}
</script>

</body>

</html>

＆＃13;

你应该找到脚本的哪一部分正在删除tooltip函数并更正它。

您也可以尝试重新排序脚本，例如，将<script type="text/javascript" src="scripts/jquery.tools.min.js"></script>放在最后位置。

Answer 2

如果重新加载jQuery，它将替换$别名和jQuery命名空间，因此jQuery.fn.tooltip不再存在。

重新加载jQuery.toolbox后，您应该尝试重新加载jQuery 1.9.1。

你可以像这样（https://stackoverflow.com/a/950146/2776550）动态地执行此操作：

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

var myPrettyCode = function() {

   // Here, do what ever you want
};

loadScript("my_lovely_script.js", myPrettyCode);

尽管如此，您应该努力在应用程序中只使用jQuery的一个副本和版本。

后续脚本加载是否有可能在早期脚本中删除已加载的函数？

2 个答案: