javascript - 执行在 ajax 响应中返回的 js 文件

Question

我有一个使用 jquery 3.2.1 的 HTML5 应用程序。

在应用程序的一部分(搜索功能)中，我发出了一个 ajax 请求。 ajax 请求的响应是 HTML，其中包括 <script>链接到与应用程序位于同一服务器上的 js 文件的标记。

所以 ajax 代码看起来像这样 - 用于发出 ajax 请求并将响应写入 ID 为 #ajaxContent 的 div。 :

$.ajax({
    url: $('#searchRegulations').attr('action'),
    type: 'post',
    cache: false,
    data: $('#searchRegulations').serialize()
 }).done(function (response, status, xhr) {
        if (response) {
            $('main .content').hide();
            $('#ajaxContent').html(response).show();
            return false;
        }
    }
});

如果我检查 #ajaxContent我可以看到 <script>标记包含在 ajax 响应中:

我还检查了我的网络选项卡以确保 /js/search_regulations.js正在正确加载，并给出 200 响应:

内部search_regulations.js有一些 jquery 可以切换 #ajaxContent 中存在的一些过滤器.

The problem is that this code only seems to be working about 50% of the time. When it works it will toggle the state of some filter buttons by adding/removing a class .active to elements inside .browse-ctp__filters-data and then writing them to a hidden form with the ID #tmpFilters.

为了确保脚本“触发”，我在 console.log('search_regulations.js firing'); 行中添加了果然，无论脚本是否正常运行，这都会每次显示在控制台中。

奇怪的是，如果我在将 ajax 响应写入页面后将代码剪切/粘贴到我的控制台，它总是会按预期工作。

这是将脚本引入页面的方式的问题吗？

我在下面粘贴了脚本，但我认为这不是其中代码的问题，而是浏览器/ajax 响应的处理方式:

$(function() {  

console.log('search_regulations.js firing');

/* toggle the active (applied) state on browse by filters */
/* @link https://stackoverflow.com/questions/48662677/switch-active-class-between-groups-of-include-exclude-buttons */
$(document).on('click', '.browse-ctp__filters-data .include, .exclude', function(){

    var $this = $(this);

    // Split name into array (e.g. "find_355" == ["find", "355"]) 
    var arr = $this.attr('name').split('_');


    // Toggle active class
    $this.toggleClass("active");
    if ($this.siblings().hasClass("active")) {
      $this.siblings().removeClass("active")
    }

    // Remove any existing instances of the filter from hidden form
    $('#tmpFilters input[value="exclude_'+arr[1]+'"]').remove();
    $('#tmpFilters input[value="find_'+arr[1]+'"]').remove();

    // If a filter has been applied then add it to hidden form
    if ($this.hasClass('active')) {
        $('#tmpFilters').append('<input type="hidden" name="tmpFilter[]" value="'+$this.attr('name')+'">');
    }
});    
}); 

关于提供的赏金的说明:

我提供了悬赏，因为这不是一个需要解决的小问题 - 没有人给出可行的答案这一事实证明了这一点。我希望得到正确答案:

1. 可使用 jsfiddle 或同等工具进行演示。
2. 解释其工作原理/原因。
3. 了解 ajax 响应是 HTML 和 js。 js 作用于响应中的 HTML 元素。因此 HTML 和 js 都需要包含在响应中——而不是说“只需将 js 添加到全局文件”(我不希望 js 是全局的，因为它是特定的给定的 HTML 响应，并且在应用程序的不同部分可能有所不同)。
4. 不应使用超时(setTimeout 或其他)。如果用户与 UI 元素(例如按钮)交互，在超时之前在 HTML 响应中返回，因此 js 被触发……这只会导致我们现在遇到的相同问题。因此，就我而言，这不是一个有效的解决方案。
5. 如果这个问题无法在 HTML5/jquery 中解决，请解释原因并提出任何替代方法来处理它。

jsfiddle 显示通过 ajax 返回的 HTML 和脚本标签:

有几个人要求提供 fiddle 或演示。没有两个人会得到相同的结果——这正是问题的重点——所以我一开始并没有做。返回的 HTML 被写入 #ajaxContent显示在这里:http://jsfiddle.net/v4t9j32g/1/ - 这是浏览器中的开发工具在 ajax 响应之后显示的内容。请注意，返回内容的长度可能会有所不同，因为它是对带回大量筛选按钮的关键字搜索工具的响应。另请注意，此 HTML 响应包含行 <script src="/js/search_regulations.js"></script> . 这就是有问题的 js 所在的位置，其全部内容已在该问题的上方显示 - 包括 console.log('search_regulations.js firing') 的位

Answer 1

我看到的一个问题是您多次将 onclick 绑定(bind)到相同的元素...

由于 js 可以通过 ajax 请求多次加载，因此在再次附加事件之前首先分离很重要。

另一个问题是，您在 $(document).ready 事件中运行代码(即加载 HTML 文档且 DOM 准备就绪时)，但是您可能最好在 $(window).load 事件中运行代码(当完整页面完全加载时执行稍晚，包括所有框架、对象和图像)

示例:

$(window).load(function() {  

    console.log('search_regulations.js firing');

    //off: detach the events
    //on: attach the events
    $('.browse-ctp__filters-data .include, .exclude').off('click').on('click', function(){
        ...
    }
});