Zend框架+jQuery：对话框确认后如何触发表单提交？

我正在使用Zend框架与jQuery进行开发，需求为：点击表单中的提交按钮时，弹出包含“继续”和“取消”按钮的对话框；当用户点击“继续”按钮时，需继续执行原按钮的表单提交动作。

表单按钮的Zend代码：

$this->addElement('Submit', 'returnleg', array
                (
                    'label'     => 'Add Leg',
                    'class'     => 'centre'
                ));

表单ID为bookingview。我编写的jQuery代码能阻止默认行为并弹出对话框，但点击对话框的“继续”按钮后，无法正确触发原表单的提交动作。尝试过用$("#bookingview .returnleg").trigger('click');，但因按钮未绑定onclick事件，该方法无效，希望得到正确的实现方案。

正确实现方案 #

直接触发按钮点击会再次触发你绑定的阻止默认行为事件，陷入循环。推荐两种可行的解决思路：

方案一：直接提交表单（推荐）

跳过按钮点击，直接调用表单的submit方法完成提交，这是最简洁高效的方式：

$(document).ready(function () {
    $("#add-leg").dialog({
        autoOpen: false,
        draggable: false,
        resizable: false,
        modal: true,
        buttons: [
            {
                text : $('.add-leg').attr('data-confirm'),
                click : function() {
                    // 直接提交目标表单
                    $("#bookingview").submit();
                    $(this).dialog("close");
                }
            },
            {
                text : $('.add-leg').attr('data-cancel'),
                click: function() {
                    $(this).dialog("close");
                }
            }
        ]
    });
    
    $("#returnleg").click(function (e) {
        e.preventDefault();
        $("#add-leg").dialog("open");
    });
});

方案二：临时解绑事件再触发按钮点击

如果必须通过按钮触发提交（比如按钮有额外内置逻辑），可以先解绑你绑定的阻止事件，触发点击后重新绑定：

$(document).ready(function () {
    // 将按钮确认逻辑抽为单独函数，方便解绑/绑定
    var submitConfirmHandler = function(e) {
        e.preventDefault();
        $("#add-leg").dialog("open");
    };
    
    $("#add-leg").dialog({
        autoOpen: false,
        draggable: false,
        resizable: false,
        modal: true,
        buttons: [
            {
                text : $('.add-leg').attr('data-confirm'),
                click : function() {
                    // 临时解绑阻止事件
                    $("#returnleg").off('click', submitConfirmHandler);
                    // 触发按钮原生提交行为
                    $("#returnleg").trigger('click');
                    // 重新绑定确认逻辑
                    $("#returnleg").on('click', submitConfirmHandler);
                    $(this).dialog("close");
                }
            },
            {
                text : $('.add-leg').attr('data-cancel'),
                click: function() {
                    $(this).dialog("close");
                }
            }
        ]
    });
    
    // 初始绑定确认逻辑
    $("#returnleg").on('click', submitConfirmHandler);
});

说明 #

• 方案一本质是直接触发表单的提交行为，避免了按钮事件的循环调用，更符合表单提交的逻辑。
• 方案二适用于依赖按钮原生行为的场景，但需要注意事件的解绑与重新绑定，避免多次绑定导致的重复触发问题。

内容的提问来源于stack exchange，提问作者vvjjcc