我正在使用jQuery Tools library在Grails项目中显示一些模态对话框。只要单击此表中任何行的第0个单元格,就会弹出一个模式对话框,显示有关该行的详细信息,如下所示:
现在,一旦您按照照片中所述清除标记,然后按Save
,该行会将其在第0个单元格中的点更改为绿色,但之后无法调出模式对话框你想再看一遍的情况。只有此行受此问题影响,如果再次呈现模板,则问题将自行解决。这是第一个单元在GSP模板中首次渲染时获取其单击功能的方式:
<tr class = "datarow">
<td>
<g:if test="${record.overallStatus == 'red'}">
<a class = "modalInput" rel = "#flagsSummary" style = "cursor:pointer">
<g:img dir="images" file="circleRed.png" width="20" height="20"/>
</a>
</g:if>
<g:if test="${record.overallStatus == 'yellow'}">
<a class = "modalInput" rel = "#flagsSummary" style = "cursor:pointer">
<g:img dir="images" file="circleYellow.png" width="20" height="20"/>
</a>
</g:if>
<g:if test="${record.overallStatus == 'greenR'}">
<a class = "modalInput" rel = "#flagsSummary" style = "cursor:pointer">
<g:img dir="images" file="circleGreenHollow.png" width="20" height="20"/>
</a>
</g:if>
<g:if test="${record.overallStatus == 'greenN'}">
<a class = "modalInput" rel = "#flagsSummary" style = "cursor:pointer">
<g:img dir="images" file="circleGreen.png" width="20" height="20"/>
</a>
</g:if>
</td>
flagsSummary
是弹出“模态”对话框的div的名称。因此,您可以看到表格中的每一行点都被设置为一个链接,其rel
属性设置为弹出模式对话框div。通过清除它的标志然后保存它来编辑记录后,我使用以下Javascript来更改表中的点以对应记录的新状态:
$('#save').click(function () {
var overAllStatus = localStorage.getItem('overAllStatus');
localStorage.removeItem('overAllStatus');
if (overAllStatus == 'red') {
rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleRed.png" width="20" height="20"></a>';
}
else if (overAllStatus == 'yellow') {
rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleYellow.png" width="20" height="20"></a>';
}
else if (overAllStatus == 'greenR') {
rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleGreenHollow.png" width="20" height="20"></a>';
}
else if (overAllStatus == 'greenN') {
rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleGreen.png" width="20" height="20"></a>';
}
comments = $('#comments').val();
$("body").trigger(esc);
$("#save1").trigger('click');
redListSize = 0;
yellowListSize = 0;
});
您可以看到我将HTML设置为与以前相同的方式,但它仍然无法启动该模式对话框。点确实改变了它的颜色,但只是失去了弹出模态对话框的能力。有没有解决的办法?这是jQuery TOOLS库的问题吗?任何帮助赞赏。感谢。