Javascript jQuery工具模态对话框链接问题

我正在使用来显示Grails项目中的一些模式对话框。每当单击此表中任何行的第0个单元格时，都会弹出一个模式对话框，显示该行的详细信息，如下所示： 现在，一旦您按照照片中的描述清除了标志，并按下

Save

，该行将其第0个单元格中的点更改为绿色，但如果您希望再次看到该行，则会失去打开模式对话框的功能。只有此行受到此问题的影响，如果再次呈现模板，问题将自行解决。这是第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>

---

您可以看到，我将HTML设置为与以前相同的方式，但它仍然失去了打开模式对话框的能力。点确实改变了它的颜色，但只是失去了弹出模式对话框的能力。有办法解决这个问题吗？这是jQuery工具库的问题吗？谢谢你的帮助。谢谢。

听起来好像在刷新/重新加载内容时，附加到“红点”的事件处理程序没有被绑定。在没有看到完整代码的情况下，很难说清楚，但是要查找将单击事件附加到“红点”的内容。例如，

$（.someselector”）。在（“单击，…）存在于包含内容的HTML页面中，更新内容时不会调用该页面。@Joshua Moore我认为附加click处理程序的原因在于，当您声明任何按钮或链接的“rel”属性和“class=modalInput”时，jQuery工具库会将其识别为模态的启动点。因此，我认为会生成一些“幕后”Javascript，在这种情况下，我怎么看？这也是我使用JS呈现内部HTML时可能不会发生的情况。听起来库在包含/加载库时正在DOM中查找匹配元素。当您更改DOM时，它不会接受这些更改（这是意料之中的）。您应该查看库的源代码，以了解它是如何附加事件侦听器的，以及是否有方法告诉它由于DOM的更改而刷新自身，或者是否有手动方法可以将事件侦听器附加到新添加/更新的DOM元素。我毫不怀疑这就是你所面临的问题。@Joshua Moore这甚至可能不起作用，但对于像我这样的蚱蜢来说，这是一个伟大的想法。我可以不替换整个内部HTML，而让链接（元素）单独存在，只替换嵌套在其中的图像吗？这就是我真正想要的，如果我能做到这一点，我需要一些JS语法方面的帮助。所以，我想让元素保持原样，因为它有“连接”来显示模态，只需更改或嵌套在其中。
$('#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;
        });