Ajax加载Div后JS脚本失效：如何在响应时重新加载脚本？

我在Ajax调用成功后加载页面内容，内容无需刷新即可正常显示，但遇到一个问题：新内容加载后部分JS脚本无法正常运行。请问是否有办法在Ajax响应时重新加载所有JS脚本？

// Slider 代码
$('.slider').each(function() {
    $("[id=" + this.id + "]").slider({
        range: true,
        min: parseInt($('[id=' + this.id + '] > #min ').val(), 10),
        max: parseInt($('[id=' + this.id + '] > #max ').val(), 10),
        values: [parseInt($('[id=' + this.id + '] > #min ').val(), 10), parseInt($('[id=' + this.id + '] > #max ').val(), 10)],
        slide: function(event, ui) {
            $('[id=' + this.id + '] > #amount ').val(+ui.values[0] + ' - ' + ui.values[1]);
        },
        change: function(event, ui) {
            $.ajax({
                url: '<?php echo curPageURL(); ?>',
                dataType: 'html',
                type: 'GET',
                data: {
                    min: ui.values[0],
                    max: ui.values[1],
                    Attr_id: $("[id=" + this.id + "]").data('id')
                },
                success: function(data, Attr_id) {
                    $('#eot_filter_menu').html($('#eot_filter_menu', data).html());
                    $('#content').html($('#content', data).html());
                }
            });
        }
    });
});

编辑1：执行Ajax调用后点击刷新按钮，页面可正常显示，因此我认为Div刷新时部分脚本未加载。

解决方案思路 #

首先，不建议重新加载所有JS脚本——这很容易引发重复绑定事件、变量冲突、性能浪费等问题。更合理的做法是针对新加载的内容，重新初始化需要的脚本，或者用事件委托处理动态元素的交互。

方法1：重新初始化目标脚本

你的Slider初始化代码只在页面首次加载时执行，不会处理Ajax动态添加的新.slider元素。所以在Ajax的success回调里，重新调用初始化逻辑即可。

为了避免代码冗余，建议把Slider初始化和Ajax请求抽成独立函数：

// 封装Slider初始化逻辑
function initSliders() {
    $('.slider').each(function() {
        $("[id=" + this.id + "]").slider({
            range: true,
            min: parseInt($('[id=' + this.id + '] > #min ').val(), 10),
            max: parseInt($('[id=' + this.id + '] > #max ').val(), 10),
            values: [parseInt($('[id=' + this.id + '] > #min ').val(), 10), parseInt($('[id=' + this.id + '] > #max ').val(), 10)],
            slide: function(event, ui) {
                $('[id=' + this.id + '] > #amount ').val(+ui.values[0] + ' - ' + ui.values[1]);
            },
            change: function(event, ui) {
                // 调用封装的Ajax请求函数
                filterBySlider(this.id, ui.values[0], ui.values[1]);
            }
        });
    });
}

// 封装Slider触发的Ajax请求
function filterBySlider(sliderId, minVal, maxVal) {
    $.ajax({
        url: '<?php echo curPageURL(); ?>',
        dataType: 'html',
        type: 'GET',
        data: {
            min: minVal,
            max: maxVal,
            Attr_id: $("[id=" + sliderId + "]").data('id')
        },
        success: function(data) {
            $('#eot_filter_menu').html($('#eot_filter_menu', data).html());
            $('#content').html($('#content', data).html());
            // 重新初始化新加载的Slider
            initSliders();
        }
    });
}

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

方法2：事件委托（针对交互类脚本）

如果是点击、hover这类事件在新元素上不生效，可以用事件委托把事件绑定到静态父元素上，而非直接绑定到动态元素：

// 错误写法：仅对首次加载的元素生效
$('.dynamic-button').click(function() { /* 逻辑 */ });

// 正确写法：事件委托，对动态添加的元素也生效
$(document).on('click', '.dynamic-button', function() { /* 逻辑 */ });

为什么不推荐重新加载所有JS？

• 重复加载会浪费带宽，拖慢页面性能
• 可能导致变量重复定义、事件多次绑定，引发难以排查的bug
• 很多脚本在页面初始化时已经执行过，重新加载会破坏原有页面状态

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