在按钮面板中显示错误所需的 jquery 即兴帮助

Question

我正在使用一个名为 impromptu 的 jquery 插件来显示一个对话框。作为对话框的一部分，有一个包含按钮的 div。 div定义如下...

<div class="jqibuttons ">
<button class=" jqibutton jqidefaultbutton " value="1" name="jqi_state0_buttonNext">Next</button>
</div>

div 的样式定义如下...

div.jqi .jqibuttons {
    background-color: #f4f4f4;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid #e4e4e4;
    margin: 0 -7px -7px;
    text-align: right;
}

它看起来像下面的屏幕截图。我想在我说过“在此处显示错误消息”(左对齐)的地方显示一条错误消息。

我尝试过将错误消息放入 div 中，但我遇到了问题。这是我用来尝试添加错误的函数...

function addErrorToDialog(error) {
    var message = '<span id="messageBox" style="display: block; width:100%"><span class="dialog-error red-text">' + error + '</span></span>';   
    $("#messageBox").empty();
    $('.jqibuttons').prepend(message);          
}

我尝试了一些不同的事情(正如您可以通过 display:block 的不寻常跨度看到的那样)，但我无法按照我的意愿显示消息。有人可以帮助我如何修改以获得更接近我所追求的东西吗？

下面的屏幕截图显示了我的代码当前生成的内容。不是我想要的。

谢谢

--编辑---

尝试使用 append 而不是 prepend 但错误出现在右侧，因为正如您在我的原始帖子中的 css 所见，text-align 设置为 right。我如何更新 css 以使按钮保持原位，但让错误消息在跨度内左对齐？

Answer 1

消息显示在按钮上方，因为您在 $('.jqibuttons').prepend(message);

中使用了前缀

相反，将 .append(message) 与消息“在此处显示错误消息”的类一起使用。比如，假设代码是

<div class='errorMsg'>Show Error Message Here</div>
$(".errorMsg").append(message);