如何让JavaScript函数识别AJAX请求返回的HTML代码

问题原因 #

你写的点击事件是在页面初始加载时，绑定到当时已经存在的[data-toggle="collapse"]元素上的。但通过AJAX请求加载的新HTML元素是后续才添加到DOM中的，这些新元素并没有被绑定到点击事件，所以点击时按钮文本不会切换。

解决方案 #

方案1：使用事件委托（推荐）

把事件绑定到一个始终存在的父元素（比如你的#fleet_view容器）上，通过事件委托监听子元素的点击事件，这样不管子元素是初始就有还是AJAX动态加载的，都能触发事件。

修改你的按钮事件代码：

$(document).ready(function() {
    // 绑定到#fleet_view容器，监听内部[data-toggle="collapse"]元素的点击
    $('#fleet_view').on('click', '[data-toggle="collapse"]', function() {
      $(this).toggleClass("active");
      $(this).text($(this).hasClass("active") ? "Hide" : "Show");
    });
});

方案2：AJAX加载完成后重新绑定事件

每次AJAX更新DOM后，手动给新添加的按钮重新绑定点击事件，注意要先移除之前的绑定避免重复触发。

修改你的AJAX请求代码：

<script>
    $(function(){
        // 封装按钮事件绑定逻辑
        function bindCollapseEvents() {
            // 先移除已有绑定，再重新绑定
            $('[data-toggle="collapse"]').off('click').click(function() {
              $(this).toggleClass("active");
              $(this).text($(this).hasClass("active") ? "Hide" : "Show");
            });
        }

        function update_fleet_view(){
            var req = new XMLHttpRequest();
            req.open("GET", "/ajax", true);
            req.send();

            req.onload = function () {
                var data = JSON.parse(req.responseText);
                document.getElementById("fleet_view").innerHTML = data["fleet_view"];
                
                // DOM更新后重新绑定事件
                bindCollapseEvents();
                
                setTimeout(update_fleet_view, 60000);
            }
        }

        // 初始页面加载时绑定一次
        bindCollapseEvents();
        // 启动AJAX更新
        update_fleet_view();
    })();
</script>

验证方法 #

打开浏览器开发者工具（F12），在事件处理函数里添加console.log('按钮被点击')，点击AJAX加载的按钮：

• 如果控制台没有输出，说明事件确实没绑定到新元素上，验证你的推测正确；
• 如果有输出，再检查按钮的active类切换和文本修改逻辑是否有问题。

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