Question

我有以下代码：

HTML

<form action="" method="post" accept-charset="utf-8" class="button-to-delete">
    <input type="submit" name="delete" value="Delete" class="btn btn-danger" />
</form>

<div class="hidden-dialog" title="Delete product">
    <p>Are you sure that you want to delete thi product?</p>
    <p>Green Lantern T-Shirt</p>
</div>

CSS

.hidden-dialog   { display: none; }

的JavaScript

$(document).ready(function() {
    var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
        resizable: false,
        autoOpen: false,
        modal: true,
        buttons: {
            'Yes!' : {
                class: 'btn btn-danger',
                text: 'Yes!',
                click: function () {
                    $(this).prev('form.button-to-delete').submit(true);
                }
            },
            'No!' : {
                class: 'btn',
                text: 'No!',
                click: function () {
                    $(this).dialog("close");
                }
            }
        }
    });

    $('form.button-to-delete').submit(function() {
        var targetURL = $(this).attr("href");

        dialog.dialog('open');
        return false;
    }); 
});

这是jsFiddle版本：http://jsfiddle.net/mdJZ8/1/

因此，当我单击表单按钮时，会出现一个带有消息和两个按钮的jQuery UI对话框：“是的！”和不！”。 “不！”按钮正常工作。 “是的！”按钮另一方面没有。它应该提交表格它没有。我怀疑问题来自return false声明。但是，如果我删除声明，Dialog出现一瞬间，表单提交，但没有给出机会用户选择一个选项。如何修复此代码，以便只有在用户单击“是”时才提交表单。按钮好吗？

Answer 1

我猜你可以用以下代码替换JS：

 $(document).ready(function() {

 var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        'Yes!' : {
            class: 'btn btn-danger',
            text: 'Yes!',
            click: function () {
                return true;
            }
        },
        'No!' : {
            class: 'btn',
            text: 'No!',
            click: function () {
                $(this).dialog("close");
                return false;
            }
        }
    }
});

$('form.button-to-delete').submit(function() {
    var targetURL = $(this).attr("href");

    return dialog.dialog('open');
});

}）;

Answer 2

如何关闭模态对话框的可见性？

$(document).ready(function() {
  var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        'Yes!' : {
            class: 'btn btn-danger',
            text: 'Yes!',
            click: function () {
                $(this).prev('form.button-to-delete').submit();
            }
        },
        'No!' : {
            class: 'btn',
            text: 'No!',
            click: function () {
                $(this).dialog("close");
            }
        }
    }
  });

  $('form.button-to-delete').submit(function() {
    var targetURL = $(this).attr("href");

    if($('div.hidden-dialog').is(':visible')) {
      return true;
    }

    dialog.dialog('open');
    return false;

  }); 
});

Answer 3

我发现了什么问题。我需要做的是使用以下语句：

$('form.button-to-delete').unbind("submit").submit();

这是完整的jQuery脚本：

$(document).ready(function() {    
    var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
        resizable: false,
        autoOpen: false,
        modal: true,
        buttons: {
            'Yes!' : {
                class: 'btn btn-danger',
                text: 'Yes!',
                click: function () {
                    $('form.button-to-delete').unbind("submit").submit();
                }
            },
            'No!' : {
                class: 'btn',
                text: 'No!',
                click: function () {
                    $(this).dialog("close");
                }
            },
        }
    });

    $('form.button-to-delete').submit(function() {
        var targetURL = $(this).attr("href");

        dialog.dialog('open');
        return false;
    });
});

使用表单的jQuery UI对话框

3 个答案: