Question

我有一个用 html 和 JS 创建的表。当单击一行时，某些数据被捕获并发送到另一个函数。问题是 clickableRow() 函数做了一个奇怪的行为。第一次点击它什么都不做，第二次点击它触发两次，第三次点击 - 三次，第五次，第六次等等，它触发超过 20-30 次。处理数据提取的罪魁祸首函数如下所示。

function clickableRow(){
        const selectTr = document.querySelectorAll("tr");
        for(items of selectTr){
            items.addEventListener("click",e=>{
                var wholeRow = e.toElement.parentElement.innerText;
                var stringArray = wholeRow.split(/(\s+)/);
                var whichTable = e.path[4].id;
                if (stringArray[0].localeCompare("ServiceID") == 0 ||
                    stringArray[0].localeCompare("VisitID") == 0 ||
                    stringArray[0].localeCompare("Vehicle") == 0){
                    // do nothing. this is in case column header is clicked when sorting.
                } else {
                    sendDataToRightPane(stringArray[0], whichTable);
                }
            });
        }
    }

HTML 表格代码：

<div id="checkServices" style="display:block">
        <table class="table table-striped">
            <tr class="bg-info" style="text-align: center">
                <th class="service" data-column="id" data-order="desc">ServiceID &#9660</th>
                <th class="service" data-column="visit.id" data-order="desc">VisitID &#9660</th>
                <th class="service" data-column="visit.vehicle.licensePlate" data-order="desc">License Plate &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair Order &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair Status &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair End Date &#9660</th>
            </tr>
            <tbody id="serviceOrdersTable">
            </tbody>
        </table>
        </div>

根据 Ajax 请求构建表的 Javascript 函数：

function buildServiceOrdersTable(data) {
        var table = document.getElementById('serviceOrdersTable')
        table.innerHTML = ''
        var text = "To Be Implemented"
        for (var i = 0; i < data.length; i++) {
            var row = `<tr onclick="clickableRow()">
                    <td>${data[i].id}</td>
                    <td>${data[i].visit.id}</td>
                    <td>${data[i].visit.vehicle.licensePlate}</td>
                    <td>${data[i].service.name}</td>
                    <td>${text}</td>
                    <td>${text}</td>
                    </tr>`
            table.innerHTML += row
        }
    }

我已经阅读了多个关于事件监听器触发不止一次的帖子，但没有一个像我的一样处于循环中，因此我无法准确指出可以从哪里修复错误。

任何帮助将不胜感激！提前致谢！

表行上的 Javascript 事件侦听器多次触发

0 个答案: