Ajax无法加载其他外部JS文件，该如何解决？

方案1：在Ajax成功回调中执行MAIN JS的初始化逻辑 #

如果你的main.js里有统一的初始化入口函数，不需要重复引入脚本文件，直接在Ajax渲染完内容后调用这个函数即可，这样能让新加载的DOM元素触发对应逻辑：

$(document).ready(function () {
    $("#livesearch").on("keyup",function(){
        var search_term = $(this).val();

        $.ajax({
            url:"ajax-live-search.php",
            type:"POST",
            data: {livesearch:search_term},
            success: function (data) {
                $("#show-search").html(data);
                // 调用main.js中定义的初始化函数
                initMainModules(); // 假设这是main.js里的入口函数
            }
        });
    }); 
});

如果必须重新加载脚本文件（不推荐，易导致重复加载冲突），可以动态创建script标签：

success: function (data) {
    $("#show-search").html(data);
    // 先移除已存在的main.js脚本，避免重复加载
    $('script[src="main.js"]').remove();
    // 动态生成新的script标签加载main.js
    var script = document.createElement('script');
    script.src = 'main.js';
    document.body.appendChild(script);
}

方案2：用事件委托绑定全局事件 #

如果问题是点击、输入这类事件无法触发，优先用事件委托把事件绑定到已存在的父元素（比如document）上，这样新加载的DOM元素也能触发事件，无需重新加载JS：

比如原来的绑定是$('.search-item').click(function(){...})，改成：

// 在main.js里统一用事件委托写法
$(document).on('click', '.search-item', function(){
    // 原有的点击逻辑
});

这种方式只需写一次，不管是初始DOM还是Ajax加载的新元素，只要匹配选择器就能触发事件。

方案3：在Ajax返回的HTML中内嵌脚本（不推荐） #

可以在ajax-live-search.php返回的HTML内容末尾添加<script src="main.js"></script>，但这种方式容易导致脚本重复加载，后期维护成本高，不建议使用。

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