ASP回调后如何保留jQuery tipsy插件的功能？

这个问题我之前在项目里踩过坑！核心原因很简单：你只在母版页首次加载时，给当时已经存在的DOM元素绑定了tipsy插件，但那些刷新后才生成（或者局部更新）的元素，并没有被重新初始化插件，所以自然就没效果了。

下面给你几个针对性的解决方案，根据你的刷新场景选就行：

1. 针对AJAX回调刷新的场景 #

如果是用jQuery的$.ajax、$.load这类方法局部刷新内容，直接在AJAX的回调函数里重新执行tipsy的初始化代码就行——而且最好限定只在刚刷新的容器内查找元素，避免重复绑定旧元素，提升效率：

// 举个用load刷新内容的例子
$('#refresh-container').load('your-content-page.asp', function(responseText, status, xhr) {
  // 回调函数里，this指向刚加载内容的容器
  if (jQuery.fn.tipsy) {
    $('.north', this).tipsy({ gravity: 'n', fade: true });
    $('.south', this).tipsy({ gravity: 's', fade: true });
    $('.east', this).tipsy({ gravity: 'e', fade: true });
    $('.west', this).tipsy({ gravity: 'w', fade: true });
  }
});

2. 针对ASP.NET UpdatePanel局部刷新的场景 #

如果你用的是ASP.NET的UpdatePanel做局部刷新，那可以利用ASP.NET AJAX自带的pageLoad函数——这个函数会在页面首次加载，以及每次UpdatePanel刷新完成后自动执行，完美替代$(document).ready()：

function pageLoad() {
  if (jQuery.fn.tipsy) {
    $('.north').tipsy({ gravity: 'n', fade: true });
    $('.south').tipsy({ gravity: 's', fade: true });
    $('.east').tipsy({ gravity: 'e', fade: true });
    $('.west').tipsy({ gravity: 'w', fade: true });
  }
}

注意：别用$(document).ready()，因为UpdatePanel刷新后不会重新触发这个事件，而pageLoad是专门为这种局部刷新场景设计的。

3. 通用复用方案：封装初始化函数 #

不管你用哪种刷新方式，都可以把tipsy的初始化逻辑封装成一个独立函数，这样需要的时候直接调用就行，代码更整洁：

// 封装初始化函数，可选传入容器参数，只初始化该容器内的元素
function initTipsy(container) {
  // 如果tipsy插件没加载，直接返回
  if (!jQuery.fn.tipsy) return;
  
  var $target = container ? $(container) : $(document);
  $target.find('.north').tipsy({ gravity: 'n', fade: true });
  $target.find('.south').tipsy({ gravity: 's', fade: true });
  $target.find('.east').tipsy({ gravity: 'e', fade: true });
  $target.find('.west').tipsy({ gravity: 'w', fade: true });
}

// 页面首次加载时初始化
$(document).ready(function() {
  initTipsy();
});

// 比如在某个按钮点击的AJAX回调里调用
$('#refresh-btn').on('click', function() {
  $.post('update-data.asp', { id: 123 }, function(data) {
    $('#content-area').html(data);
    // 只初始化刚更新的内容区域里的元素
    initTipsy('#content-area');
  });
});

额外提醒：避免重复绑定 #

如果你的刷新逻辑可能会重复执行（比如多次点击刷新按钮），可以先检查元素是否已经绑定了tipsy，或者先销毁旧的实例再重新初始化。不过只要你用容器参数限定初始化范围（只针对新添加的元素），一般不会出现重复绑定的问题。

内容的提问来源于stack exchange，提问作者sinsedrix