我正在撰寫一個在線調查 Spring MVC 應用程式。用戶為調查創建問題并發布它們。為此，我從資料庫中獲取了所有問題并將它們展示給用戶選擇。我捕獲問題的 id 并將它們發布到服務器。我正在使用 jquery 的資料表向客戶展示它們。這是我向客戶展示的課程：
public class QuestionView {
private Integer questionId;
private String header;
private String text;
public QuestionView() {
super();
}
public QuestionView(String text) {
this();
this.text = text;
}
public QuestionView(String text, String header) {
this(text);
this.header = header;
}
// getters and setters are here
}
這是向客戶端顯示問題的 JSP 代碼。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Selection of Questionnaires Page</title>
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href=<spring:url value="/resources/css/0.0.1/yokOrtakBasamakliStilSablonu.min.css"/> >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src='<spring:url value="/resources/js/0.0.1/yokOrtakJavaScript.min.js"/>' type="text/javascript"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
</head>
<body>
<input type="hidden" name="inputSelectedQuestionIdArray" value="PUT" />
<!-- Other elements omitted for brevity -->
<table data-role="table" id="tblQuestion">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Choose</th>
<th scope="col">Text</th>
</tr>
</thead>
<tbody>
<c:forEach items="${questionViewList}" var="questionView">
<tr id="tr${questionView.questionId}">
<td scope="row"><c:out value="${questionView.questionId}" /></td>
<td >
<label
>
<input type="checkbox" data-style="2" data-role="checkbox"
name="table_row_check[]" value="1"
data-role-checkbox="true"> <span ></span> <span
></span>
</label></td>
<td scope="row"><c:out value="${questionView.text}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
這是JSP的相關javascript代碼：
<script type="text/javascript">
var selectedQuestionIdArray = [];
//A $( document ).ready() block.
$(document).ready(function() {
console.log("select question ready!");
// jquery's datatable has applied here
$('#tblSoru').DataTable();
$(".check").click(function(){
console.log("check clicked");
var parent = $(this).parent();
console.log("parent: " parent );
var id = $(this).parent().attr('id');
console.log("Chosen id: " id );
selectedQuestionIdArray.push(selectedQuestionIdArray);
console.log( selectedQuestionIdArray.length " number(s") of questions selected .");
$("#inputSelectedQuestionIdArray").val(selectedQuestionIdArray);
console.log( " Content of selectedQuestionIdArray: " $("#inputselectedQuestionIdArray").val());
});
});
</script>
用戶已看到帶有分頁的表格。問題出在表的第一頁 $(".check").click(function() 已經作業了。但是，在第二頁、第三頁或更多頁中， $(".check").click(function()不起作用。當我使用以下命令設定分頁時：
// jquery's datatable has applied here
$('#tblSoru').DataTable(( {
"iDisplayLength": 50
} ));
在這種情況下，前 50 個問題已回應 $(".check").click(function()。這是生成的 html 的部分：
<tr id="tr6">
<td scope="row">6</td>
<td class="check-cell">
<label
class="checkbox table-service-check style2 transition-on">
<input type="checkbox" data-style="2" data-role="checkbox"
name="table_row_check[]" value="1" class=""
data-role-checkbox="true"> <span class="check"></span> <span
class="caption" ></span>
</label></td>
<td scope="row">Question6</td>
</tr>
<tr id="tr1006">
<td scope="row">1006</td>
<td class="check-cell">
<label
class="checkbox table-service-check style2 transition-on">
<input type="checkbox" data-style="2" data-role="checkbox"
name="table_row_check[]" value="1" class=""
data-role-checkbox="true"> <span class="check"></span> <span
class="caption" ></span>
</label></td>
<td scope="row">Dcgj?6bf?y?10xut??2j0dzvsbbezjowrrh?durpenclnn??i?rqzopü?v?h4gu01twue?</td>
</tr>
如您所見，生成到 HTML 的行之間沒有任何區別。
我該如何解決這個問題？
提前致謝。
uj5u.com熱心網友回復：
因為后續頁面當前不在 DOM 中，所以不能直接附加點擊事件。嘗試使用事件委托：
$(document).on('click', '.check', function(){ ... });
通過這種方式，事件被附加到檔案，但該函式僅在單擊的元素具有“檢查”的 css 類時才運行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494560.html
上一篇：SpringBoot通過自定義屬性序列化kotlin列舉
下一篇：org.springframework.dao.IncorrectResultSizeDataAccessExceptionMongoLimit不起作用？