다음과 같이 나는 현재 JSP 페이지가 JSP foreach는

Question

에 인라인 자바 스크립트를 제거 : 보안상의 이유로

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 

<a href=# onclick="javascript:myFunction1();">Submit form with default</a><br> 

<c:forEach items="${details}" var="detail"> 
    <a href=# onclick="javascript:myFunction2(${detail.id});">Submit form for detail id <c:out value="detail.id" /></a><br> 
</c:forEach> 

<script type="text/javascript"> 
function myFunction1() { 
    document.myForm.id.value = 0; 
    document.myForm.submit(); 
} 

function myFunction2(detailId) { 
    document.myForm.id.value = detailId; 
    document.myForm.submit(); 
} 
</script> 

, 나는 인라인 자바 스크립트를 제거합니다. 나는 다음과 같이 myFunction1()를 처리하는 방법을 알고 : 내가 할 방법을 모르는 무엇

는

function myFunction1() { 
    document.myForm.id.value = 0; 
    document.myForm.submit(); 
} 

function myFunction2(detailId) { 
    document.myForm.id.value = detailId; 
    document.myForm.submit(); 
} 

document.getElementById('myDefault').addEventListener('click', myFunction1); 

onclick="javascript:myFunction2(${detail.id});"과를 제거하는 방법입니다 :

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 

<a href=# id="myDefault">Submit form with default</a><br> 

<c:forEach items="${details}" var="detail"> 
    <a href=# onclick="javascript:myFunction2(${detail.id});">Submit form for detail id <c:out value="detail.id" /></a><br> 
</c:forEach> 


<script src="myJavascript.js"></script> 

그리고 파일 myJavascript.js에

이벤트 핸들러.

Answer 1

당신은 같은 각각의 앵커에 data attribute를 추가 할 수 있습니다

data-detail-id="${detail.id} 

을 클릭 이벤트 처리기 내부 당신이 현재 deatail ID 값 얻을 수 있습니다 : 모든 앵커를 선택하기 위해

this.dataset.detailId 

을 다음과 같은 데이터 속성을 사용할 수 있습니다.

document.querySelectorAll('[data-detail-id]') 

이제 반복 할 수 있습니다.

document.querySelectorAll('[data-detail-id]').forEach(function(ele, idx) { 
 
    ele.addEventListener('click', function(e) { 
 
     var dID = this.dataset.detailId; 
 
     console.log(dID); 
 
    }); 
 
})

<a href=# data-detail-id="${detail.id}1">Submit form for detail id <c:out value="detail.id" /></a><br> 
 
<a href=# data-detail-id="${detail.id}2">Submit form for detail id <c:out value="detail.id" /></a><br>

: ADY 첫 번째 앵커했다