jquery ui 对话框在按钮前面添加图像

Question

对于表单，我有一个提交按钮，它使用 ajax 发布表单。加载此表单时，我想在按钮旁边显示一个微调器。这可能看起来像这个问题:jQuery UI Dialog, adding elements next to a button ，但不同的是，在那篇文章中，问题是在左上角显示一个图标。另外，提出的解决方案对我不起作用。

我尝试了以下方法(来自另一个线程):

var $respond_dialog = $( "#respond_div" ).dialog({
        width: 500,
        autoOpen: false,
        resizable: true,
        modal: true,
        buttons: {
            "Reageren": function() {
                            $('<div style="width:20px;height:20px;float:right;" 
                            class="ui-autocomplete-loading"></div>').insertBefore(
                            $("#respond_div").next('.ui-dialog-buttonpane > button:first'));
                   ...

但这没有任何作用。如果删除 >，我会得到一个微调框，但显示如下:

我该如何解决这个问题？

编辑:我想要的是这样的:

fiddle :http://jsfiddle.net/vpwjw/10/

Answer 1

另一个例子没有处理你所设置的按钮，这就是 < 的原因。什么也不返回，

$('<div style="width:20px;height:20px;float:left;" class="ui-autocomplete-loading"></div>')
 .insertBefore('#respond_div .ui-dialog-buttonpane button:first');

您只需使用 1 个选择器即可获得正确的位置。另请注意，float:left;

您还需要调整内边距以使其居中。