解决jQuery插件tipswindown与hintbox冲突
作者:工具松鼠时间:2026-10-25 12:48:39浏览:527
本文介绍如何解决jQuery插件tipswindown与hintbox在使用ajaxStart时产生的冲突。由于两个插件共享jQuery.ajaxSettings中的全局xhr对象,导致事件触发混乱。通过修改jquery.hintbox-1.3.js中针对#windown-content的处理逻辑,将ajaxStart改为直接设置HTML,可避免冲突。
问题背景与现象
使用场景如下:
在页面a.aspx中,点击按钮弹出模拟层,该层内包含一个名为“监督人”的输入文本框,此处调用hintbox以实现即时查询功能。

直接调用时会出现如下问题:

代码修改方案
随后定位到jquery.hintbox-1.3.js文件,发现其中存在如下代码行:
代码如下:
$("#windown-content").ajaxStart(function(){
$(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");
}); 将其修改为:
代码如下:
$("#windown-content").html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />"); 冲突原因分析
原因在于,即使在不同情形下触发ajax事件,这两个插件仍共用同一对象,即jQuery.js中定义的:
代码如下:
ajaxSetup: function( settings ) {
jQuery.extend( jQuery.ajaxSettings, settings );
},
ajaxSettings: {
url: location.href,
global: true,
type: "GET",
contentType: "application/x-www-form-urlencoded",
processData: true,
async: true,
/*
timeout: 0,
data: null,
username: null,
password: null,
*/
// Create the request object; Microsoft failed to properly
// implement the XMLHttpRequest in IE7, so we use the ActiveXObject when it is available
// This function can be overriden by calling jQuery.ajaxSetup
xhr:function(){
return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
},
accepts: {
xml: "application/xml, text/xml",
html: "text/html",
script: "text/javascript, application/javascript",
json: "application/json, text/javascript",
text: "text/plain",
_default: "*/*"
}
}, 这样在当前窗体中就会是只有一个xhr对象存在,因为在hintbox中的ajax事件会触发tipswindown的ajaxStart事件。
可下载修改过后的tipswindown,点击下载。
作者最新文章
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比:哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境,5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26
JS怎么将地址栏查询字符串转换为JSON对象
2026-11-03 18:10:29
