Question

我正在使用asp.net mvc。我试图在jquery对话框中显示一个表单，如

$("#dialog-editinvitem").dialog({
        autoOpen: false,
        width: 420,
        resizable: false,
        modal: true,
        buttons: {
            OK: function () {
               //...
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
        }
    });

它工作正常。对话框中的按钮显示在对话框的底部。但是我需要在对话框标题栏后面的对话框左上角显示按钮。我试过用一些jquery代码来定位按钮面板，如

var btnset = $(this).parent().children('.ui-dialog-buttonpane').html();
            $(this).parent().children('.ui-dialog-buttonpane').remove();
            $("<div class='ui-dialog-buttonpane ui-widget-content ui-helper-clearfix'>" + btnset + "</div>").insertAfter($(this).parent().children('.ui-dialog-titlebar'));
            $('.ui-dialog-buttonset').css('float', 'left');
            $('.ui-dialog-buttonpane').css('border-width', '0px 0px 1px 0px');

按钮面板成功定位在左上角，但它不会触发按钮单击事件。请指导我。

Answer 1

您的代码存在问题，您正在删除dom元素及其相关事件。尝试克隆dom元素并做一些样式。一旦完成，你将删除原件。将此更改为

$（本）.parent（）的儿童（ 'UI-对话框的buttonpane。'）除去（）;

此

var objbuttonPane = $(this).parent().children('.ui-dialog-buttonpane').clone(true);
//once you done with styling and positiong the button. you do  remove the original element  and append the cloned element

或为什么你需要Jquery按钮？您可以根据自己的选择设置提交/链接并设置样式。只是不要在jquery对话框中传递按钮对象。像这样的东西。

$("#dialog").dialog({
        autoOpen: true,
        width: 420,
        resizable: false,
        modal: true,       
        close: function () {
        }
    });

演示：Jsfiddle

Answer 2

请在打开对话框时尝试添加按钮元素位置，就像下面的代码段

一样

$('#dialog-editinvitem').dialog({
  open: function (event, ui) {
    $(this).before($(this).parent().find('.ui-dialog-buttonpane'));
  },
  ...

如何使用jquery更改jquery对话框中按钮的位置

2 个答案: