AJAX（Asynchronous JavaScript and XML）是一种在Web页面中进行异步数据交互的技术，它可以实现页面的无刷新加载和局部更新，极大地提升了用户体验。然而，有时候在使用AJAX加载页面时，我们可能会遇到页面中的JS代码失效的问题。本文将探讨一些可能导致这一问题发生的原因，并对解决方案进行讨论。

首先，一个常见的原因是在AJAX加载的HTML片段中包含有脚本标签，而这些标签没有被执行。假设我们有一个页面，在点击一个按钮后使用AJAX加载了另一个页面的部分内容。如果这个被加载的页面中包含了一些JavaScript代码，那么这些代码不会被自动执行，而只是简单地插入到页面中而已。这意味着一些相关的功能将无法使用，导致JS失效。

// 点击按钮加载页面的示例代码
$('#btn').on('click', function() {
$.ajax({
url: 'new-page.html',
success: function(data) {
$('#content').html(data);
}
});
});

解决这个问题的一种方法是手动执行包含在被加载页面中的JS代码。我们可以在AJAX请求成功后，使用JavaScript的eval()函数来执行这些代码：

$.ajax({
url: 'new-page.html',
success: function(data) {
$('#content').html(data);
// 手动执行被加载页面中的JS代码
evalScripts(data);
}
});
function evalScripts(data) {
var scripts = $(data).filter('script');
$(scripts).each(function() {
eval($(this).text());
});
}

另一个导致JS失效的常见原因是与页面中的事件绑定有关。当我们使用页面中的元素作为选择器来绑定事件时，如果这些元素在AJAX加载后发生了改变，那么之前绑定的事件将失效。例如，我们在页面初始加载完成后绑定了一个按钮的点击事件：

// 初始加载时绑定点击事件
$('#btn').on('click', function() {
console.log('按钮被点击了！');
});

当我们使用AJAX加载了一个新的按钮到页面中时，之前绑定的点击事件将不再生效：

// AJAX请求成功后加载新的按钮
$.ajax({
url: 'new-button.html',
success: function(data) {
$('#content').html(data);
// 之前绑定的点击事件失效
}
});

为了解决这个问题，我们可以使用事件委托。事件委托是通过将事件监听器绑定到一个父元素上，然后根据事件的目标元素来决定执行相应的操作。这样，不论元素是否是动态加载的，事件都能被正确地触发：

// 使用事件委托绑定点击事件
$('#content').on('click', '#btn', function() {
console.log('按钮被点击了！');
});

综上所述，当使用AJAX加载页面时，我们需要注意可能会导致页面中的JS代码失效的原因。通过手动执行被加载页面中的JS代码，并使用事件委托来绑定事件，我们可以有效地解决这些问题，确保页面的正常运行。