Question

我想在页面上放置两个单独的文件上传面板，一个用于图像，另一个用于其他文件。每个面板都包含一个内部带有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>

Answer 1

在html标记中，id属性在页面上应始终是唯一的。我不确定它是否符合任何规范，但它通常被认为是一种良好的做法，而且往往依赖于它。

如果你需要控制id（因为你在JavaScript中引用它并且比找出Wicket生成的id更容易），你需要手动管理它。

如果您只是省略id属性，Wicket将根据wicket id生成一个，并保证页面的唯一性。

根据评论主题，这似乎是问题所在。

Wicket：两个AjaxButtons内部的单独形式问题

1 个答案: