java - 小门:单独的表单中的两个AjaxButtons发出

我想在页面上放置两个单独的文件上传面板，一个用于图像，另一个用于其他文件。每个面板都包含一个内部带有AjaxButton的表单。首先，我开发了第一个面板，它按预期工作。但是，当我添加另一个时，单击表单时窗体内的第二个AjaxButton没有响应。相反，当我单击第一个按钮时，第二个按钮会响应。可能是什么原因呢？

这是第一个面板的HTML：

<wicket:panel>
    <div wicket:id="form-container-img">
        <form wicket:id="form-img">
            <img wicket:id="releaseImage" class="thumbnail" />
            <p>
                <label>Select file :</label>
                <input wicket:id="fileUpload-img" size="40" type="file"/>
                <input wicket:id="uploadButton-img" id="uploadButton" type="submit" value="Upload" />
            </p>
        </form>
    </div>
</wicket:panel>

第二个：

<wicket:panel>
    <div wicket:id="form-container-album">
        <form wicket:id="form-album">
            <span wicket:id="releaseName" />
            <p>
                <label>Select file :</label>
                <input wicket:id="fileUpload-album" size="40" type="file" />
                <input wicket:id="uploadButton-album" id="uploadButton" type="submit" value="Upload" />
            </p>
        </form>
    </div>
</wicket:panel>

因此，现在，当两个面板都放置到位时，单击uploadButton-album不会执行任何操作，但是会通过单击uploadButton-img进行响应。

编辑：

<wicket:panel>
        <div wicket:id="uploadPanelReleaseImg"></div>
        <div wicket:id="uploadPanelReleaseAlbum"></div>
</wicket:panel>

最佳答案

在html标记中，id属性在页面上应始终是唯一的。我不确定任何规范都要求它，但是通常认为它是一种好习惯，并且事情常常取决于它。

如果您需要控制ID（因为您是在JavaScript中引用该ID，并且比弄清楚Wicket生成的ID更容易），则需要手动进行管理。

如果您只是省略id属性，Wicket将基于小门id生成一个，并保证页面上的唯一性。

根据注释线程，这似乎是问题所在。