Question

我在JS中有以下代码。我发现双击时成功选择了表格行，但我的问题是该方法需要花费一些时间，因为它需要循环多次。有人可以吗。指出我在这个javascript-jquery代码中缺少的内容，以便该方法只发出一次而不是多次警报。

JS

function selectTableRowData(){

   $(document).on('dblclick', '#tableSectionDetails tbody tr', (function(){
    var caseId = $(this).closest("tr").find("select").val();

    alert (caseId); //alerts multiple times

    } 
}));

}

JSP

<table class="table table-bordered table-hover spacer-top" id="tableSectionDetails" name="tableSectionDetails" ondblclick="selectTableRowData();return false;">
                    <thead>
                        <tr >
                            <th class="text-center">Section name </th>
                            <th class="text-center">SubSection name (if exists)</th>
                            <th class="text-center">Case Name </th>

                        </tr>
                    </thead>
                    <tbody>
                         <c:forEach var="section" items="${sectionList}">
                            <c:if test="${section.subSectionList.size()==0}">
                                <tr>
                                    <td>${section.sectionName}</td>
                                    <td>-</td>
                                    <td>
                                        <select id="selectCaseName" name ="selectCaseName" class="form-control">
                                                <c:forEach var="scase" items="${section.SCaseList}">
                                                    <option value="${scase.id}">${scase.caseName}</option>
                                                </c:forEach>  
                                        </select>
                                    </td>
                                </tr>
                            </c:if> <!-- if subsection ==0 -->
                            <c:if test="${section.subSectionList.size()==1}">

                                <tr> 
                                    <td>${section.sectionName}</td>
                                    <td>${section.subSectionList.get(0).subSectionName}</td>
                                    <td>
                                        <select id="selectCaseName" name ="selectCaseName" class="form-control">
                                                <c:forEach var="scase" items="${section.subSectionList.get(0).SCaseList}">
                                                    <option value="${scase.id}">${scase.caseName}</option>
                                                </c:forEach>  
                                        </select>
                                    </td>
                                </tr>
                            </c:if>     <!--end   subsection ==1 -->
                            <c:if test="${section.subSectionList.size()>1}">
                                <c:forEach var="subSection" items="${section.subSectionList}">
                                    <tr>
                                        <td>${section.sectionName}</td>
                                        <td>${subSection.subSectionName}</td>

                                        <td>
                                            <select id="selectCaseName" name ="selectCaseName" class="form-control">
                                                    <c:forEach var="scase" items="${subSecction.SCaseList}">

                                                        <option value="${scase.id}">${scase.caseName}</option>
                                                    </c:forEach>  
                                            </select>

                                        </td>
                                    </tr>
                                </c:forEach> <!-- subsection loop end -->
                            </c:if>     <!-- if subSection > 1 -->
                         </c:forEach> <!-- section loop end --> 

                    </tbody>
                </table>

Answer 1

您的<table>标记的函数selectTableRowData（）绑定了它的双击事件。然后在selectTableRowData（）函数中，创建侦听器并将代码绑定到双击事件。这意味着您有一个事件处理程序，您可以在双击时创建更多事件处理程序每次。除非你解开它们，否则这些听众不会消失。

因此，第一次单击时，绑定一个集合，这意味着一个警报;第二次单击时，您有两个侦听器，因此有两个警报等。在创建表后，尝试仅运行一次selectTableRowData（）。

Answer 2

绑定到双击事件的事件处理程序selectTableRowData()会在元素上添加事件侦听器，并且事件会在双击时传播，并且会创建多个新侦听器。

解决方案：

通过使用selectTableRowData()将事件作为参数传递给函数event.stopPropogation，停止双击传播新侦听器。我使用Knockout创建了一个JSBIN解决方案来进行数据绑定。

表行选择方法多次发出警报而不是一次

2 个答案: