AJAX动态加载内容后Swipe滑动功能失效问题求助

嘿，这个问题我熟！核心原因很简单——动态加载的DOM元素不会自动继承页面初始化时绑定的Swipe实例。

你第一次加载页面B的时候，页面A已经执行了Swipe.init，此时页面B的元素存在，所以滑动能正常工作。但当你通过XHR重新加载页面B、替换掉#demo里的内容后，新的<li>和.swipe-left-right元素是全新的DOM节点，之前的Swipe实例（s1、s2）还绑定在旧元素上，自然没法控制新元素的滑动。

下面给你具体的修复步骤：

第一步：把滑动初始化逻辑封装成可复用函数 #

把你的滑动脚本改成独立函数，这样每次页面B加载完成后都能重新调用，确保新元素被正确初始化：

// 封装Swipe初始化逻辑
function initSwipe() {
  // 先清理旧实例（避免内存泄漏，可选但推荐）
  if (window.s1) window.s1 = null;
  if (window.s2) window.s2 = null;

  // 重新初始化Swipe实例
  window.s1 = Swiped.init({ 
    query: 'li>.swipe-right', 
    list: false, 
    left: 5, 
    right: 0 
  }); 
  window.s2 = Swiped.init({ 
    query: 'li>.swipe-left-right', 
    list: false, 
    left: 5, 
    right: 5 
  }); 

  // 重新绑定touchstart事件（先解绑再绑定，避免重复触发）
  jQuery(document)
    .off('touchstart', 'li>.swipe-right')
    .on('touchstart', 'li>.swipe-right', function() { 
      s1.open; 
    }); 
  jQuery(document)
    .off('touchstart', 'li>.swipe-left-right')
    .on('touchstart', 'li>.swipe-left-right', function() { 
      s2.open; 
    }); 

  // 初始化带onOpen回调的实例
  Swiped.init({ 
    query: 'ul.swipe-list>li>.swipe-left-right', 
    onOpen: onOpenfunction 
  }); 
  Swiped.init({ 
    query: 'ul.swipe-list>li>.swipe-right', 
    onOpen: onOpenfunction 
  }); 
}

// 滑动触发后的回调函数
var onOpenfunction = function() { 
  var clickUndo = false; 
  var dir = this.dir; 
  var offset, invert_offser; 
  if (dir === 1) { 
    offset = '110%'; 
    invert_offser = '-110%'; 
  } else { 
    offset = '-110%'; 
    invert_offser = '110%'; 
  } 
  jQuery(this.elem).animate({left: offset}); 
  console.log(offset); 
  jQuery('.patient-list__info--mirror',jQuery(this.elem).parent()).css('left',invert_offser).animate({left: 0}); 
  jQuery('.patient-list__info--mirror',jQuery(this.elem).parent()).click(function () { 
    jQuery('.patient-list__info',jQuery(this).parent()).not('.patient-list__info--mirror').animate({left: 0}); 
    jQuery(this).animate({left: invert_offser}); 
    clickUndo = true; 
    jQuery(this).off(); 
  }); 
  var currentElem = this.elem; 
  var parentElem = jQuery(this.elem).parent(); 
  setTimeout(function() { 
    if(!clickUndo) { 
      jQuery(parentElem).hide(); 
      if(dir === 1){ 
        console.log(jQuery(currentElem).attr('linkRight')); 
        var right_swipe = jQuery(currentElem).attr('linkRight'); 
        $.ajax({url: right_swipe, success: function(result){ }}); 
      } else { 
        console.log(jQuery(currentElem).attr('linkLeft')); 
        var left_swipe = jQuery(currentElem).attr('linkLeft'); 
        $.ajax({url: left_swipe, success: function(result){ }}); 
      } 
    } 
  }, 5000); 
};

第二步：在页面B加载完成后调用初始化函数 #

修改页面A里的loadDoc函数，在成功插入页面B内容后，立即调用initSwipe()，确保新元素被绑定滑动功能：

<script> 
// 通过XMLHttpRequest加载页面B
function loadDoc(search) { 
  var xhttp = new XMLHttpRequest(); 
  xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("demo").innerHTML = this.responseText; 
      // 关键：加载完成后重新初始化Swipe
      initSwipe();
    } 
  }; 
  xhttp.open("GET", "swipe_page.php", true); 
  xhttp.send(); 
} 
// 初始加载页面B时也要调用初始化
loadDoc(''); // 注意：原代码的search变量未定义，这里改成空字符串避免报错
</script>

额外小提醒 #

• 原代码里的loadDoc(search)中search变量未定义，建议改成loadDoc('')或者提前定义好search的值，避免控制台报错。
• 如果Swiped库提供了销毁实例的方法（比如s1.destroy()），记得在initSwipe开头先销毁旧实例，能更好地避免内存泄漏。

这样修改后，每次页面B重新加载，新的DOM元素都会被正确初始化Swipe实例，滑动功能就能正常工作啦！

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