2017-12-27 922 views
1

刪除內嵌的JavaScript我現在有一個jsp頁面類似如下:在JSP中的foreach

<%@ 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> 

出於安全原因,我想刪除內嵌的JavaScript。我知道如何處理myFunction1()如下:

<%@ 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:

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});"與一個事件處理器。

回答

0

您可以將data attribute添加到每個錨一樣:

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

裏面的單擊事件處理程序,你可以得到價值與當前deatail ID:

this.dataset.detailId 

爲了選擇所有的美女主播與這樣的數據屬性,你可以使用:

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

現在你可以重複你alre安以軒爲第一個錨:

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>