Wicket AjaxLink javascript 处理程序显示奇怪的行为

Question

我有一个ListView，它显示Panels 的列表，一个在另一个之下。每个面板都有一个按钮（通过 AjaxLink 实现），用于关闭面板并将其从列表中删除。

这是 ListView 的初始化方式和面板的创建方式：

panelsList = new ArrayList<MyPanel>();
pnlContainer = new WebMarkupContainer("pnlContainer");

ListView<MyPanel> pnlItems = new ListView<MyPanel>("pnlItems", panelsList) {
    @Override
    protected void populateItem(final ListItem<MyPanel> item) {
        item.add(item.getModelObject());
        item.add(new AjaxLink<Void>("pnlClose") {
            @Override
            public void onClick(AjaxRequestTarget target) {
                panelsList.remove(item.getModelObject());
                target.add(pnlContainer); // repaint panel container
            }
        });
    }
};

pnlContainer.setOutputMarkupId(true);
pnlContainer.add(pnlItems);
add(pnlContainer);

到目前为止，这有效 - 触发添加新面板（通常也是 AjaxLinks）的操作会执行应有的操作，并且新面板已正确添加和显示。但我无法让关闭按钮完全发挥作用。

请看以下步骤：

1) 我启动服务器并导航到主页。 ListView 最初填充了一个面板。

此面板的关闭按钮代码：

<a wicket:id="pnlClose" id="pnlClose7" href="javascript:;">Close</a>

搜索 pnlClose7 的页面代码会发现以下 javascript 代码使按钮按预期工作：

Wicket.Ajax.ajax({"u":"./?0-1.IBehaviorListener.0-pnlContainer-pnlItems-0-pnlClose","e":"click","c":"pnlClose7"});;

注意：我现在不按下按钮，如果我愿意，它会按预期工作（经过彻底测试）。

2) 我触发了一个打开第二个面板的操作。该面板按预期显示在第一个面板下方。

第一个面板的关闭按钮：

<a wicket:id="pnlClose" id="pnlClosef" href="javascript:;">X</i></a>

第二个面板的关闭按钮：

<a wicket:id="pnlClose" id="pnlClose10" href="javascript:;">X</i></a>

但是现在，搜索 pnlClosef 和 pnlClose10 都找不到一些 javascript 代码。按钮（两个！）不起作用。我仍然可以找到 pnlClose7 的 javascript 代码。

3)我通过按 F5 重新加载页面。

按钮 ID 更改为 pnlClose1a 和 pnlClose1b。两个 ID 都有对应的 javascript 并且可以工作。

4) 我按下第一个按钮（上面板，ID pnlClose1a）。面板按预期关闭。

其余按钮的 ID 更改为 pnlClose1c，同样没有 javascript 对应项。 pnlClose1a 和 pnlClose1b 的 Javascript 代码仍然存在。

长话短说，我的AjaxLinks 的 javascript 处理程序似乎存在害羞问题，并且仅在我按 F5 或以任何其他方式重新加载整个页面后才会出现。我想那是因为重新绘制 pnlContainer 会更改当前面板的 ID - 但为什么链接的 javascript 没有同时更新？我可以在我的代码中更改什么来更新整个页面而无需完全重新加载吗？

奇怪的是，我很确定这在以前是有效的……但我检查了整个班级历史，找不到任何会引发这种情况的重大变化。 ListView-code 自我添加以来主要是静态的。

Answer 1

我遇到了类似的问题。如果您的页面或面板 html 文件中有任何硬编码的 javascript 代码（使用