XMLHttpRequest场景下Shift键批量勾选复选框失效求助

通过XMLHttpRequest异步加载复选框数据后，原本正常的Shift键批量勾选/取消功能失效，只能逐个操作。

问题原因 #

页面初始渲染时，异步加载的复选框还未生成，$(document).ready()中直接绑定的.chkboxtb点击事件只对当时存在的DOM元素生效，后续动态生成的复选框没有绑定该事件，导致Shift批量逻辑无法触发。

解决方法：使用jQuery事件委托 #

将事件绑定到已存在的父容器（如#coba）上，利用事件冒泡机制监听动态生成的复选框点击事件。

修改后的z1.php代码 #

<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="shortcut icon" type="image/x-icon" href="/to/img/bqicon.png"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    </style>
    <script>
        window.onload=function(){
            var coba = document.getElementById("coba");
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/to/z1ajax.php", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    coba.innerHTML = xhr.responseText;
                }
            }
            var v="onload=yes";
            xhr.send(v);
        }
    
        $(document).ready(function(){
            var lastChecked=null;
            // 事件委托：绑定到父容器#coba，监听子元素.chkboxtb的点击
            $('#coba').on('click', '.chkboxtb', function(e){
                if(!lastChecked){
                    lastChecked=this;
                    return;
                }
                if(e.shiftKey){
                    // 重新获取当前所有.chkboxtb元素，确保包含动态生成的
                    var $chkboxestb=$('.chkboxtb');
                    var start=$chkboxestb.index(this);
                    var end=$chkboxestb.index(lastChecked);
                    $chkboxestb.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked',e.target.checked);
                }
                lastChecked = this;
            });
        });
    </script>
</head>
<body>
    <div id='coba'></div>
</body>
</html>

关键改动说明 #

1. 把直接绑定.chkboxtb的click事件，改成通过父容器#coba的on()方法进行事件委托，指定监听子选择器.chkboxtb的点击事件。
2. 在Shift键触发的逻辑里，每次都重新获取$('.chkboxtb')集合，确保包含所有动态生成的复选框，避免初始集合不包含新元素的问题。

补充说明 #

z1ajax.php的代码无需修改，保持原逻辑即可。

内容的提问来源于stack exchange，提问作者Juna serbaserbi