使用表单的jQuery UI对话框

我有以下代码：

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>

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;
    }); 
});

以下是JSFIDLE版本：

因此，当我单击表单按钮时，会出现一个jQueryUI对话框，其中包含一条消息和两个按钮：“Yes！”和“No！”。 “否！”按钮工作正常。另一方面，“Yes！”按钮没有。它应该提交表格 但事实并非如此。我怀疑问题来自

return false

语句。但是，如果我删除 在语句中，对话框会在一瞬间出现，表单会在不给用户机会的情况下提交

---

用户选择一个选项。如何修复此代码，使其仅在用户单击“是！”按钮时提交表单？

我想您可以将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');
}); 

---

}))

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

$(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;

  }); 
});

---

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

$('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;
    });
});

---

没有，还是不工作。但现在问题不同了：对话框在一瞬间打开，然后提交表单，但没有给用户提供选择选项的更改……对不起，var不能返回true或false。应该改为函数调用，但上面的Francois Wahl已经解决了。我尝试了你的解决方案，但在我的应用程序上不起作用。当我点击按钮时，对话框甚至没有出现。不管一行代码有多“凌乱”，它都能正常工作。

$(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;
    });
});