在 JQuery 委托中触发表单提交

Posted 2023-05-08

【中文标题】在 JQuery 委托中触发表单提交

【英文标题】：Triggering Form Submission in JQuery Delegate

【发布时间】：2019-06-27 03:13:12

【问题描述】：

我有一个用于确认按钮单击的引导模式，并希望根据用户响应提交特定表单。除了实际的表单提交外，我一切正常。以下是详细信息。

该按钮不打算提交它所在的表单。表单的提交按钮工作正常（并且不使用模态确认），它是表单的“正常”更新按钮。有问题的按钮用于在同一页面上提交不同的表单（此按钮删除有问题的记录并使用模态确认）。值得注意的是“data-form”属性，我用它来传递我要提交的表单的选择器。

<button id="CancelApplication" type="button" class="btn btn-outline-primary btn-sm delete-event" data-form="#ApplicationDelete" data-toggle="modal" data-target="#confirmationModal" data-dismiss="modal" data-confirmation="You are about to cancel your application!" data-confirmation-title="Cancel Application">Cancel Application</button>

如果用户通过 Modal 确认，这是我要提交的表单：

<form id="ApplicationDelete" asp-action="Delete" asp-antiforgery="true" method="post">
    <input type="hidden" asp-for="CampaignId" />
</form>

这里是 Jquery：

showConfirmation = function (title, message, success, cancel) 
    title = title ? title : 'Are you sure?';
    var modal = $("#confirmationModal");
    modal.find(".modal-title").html(title).end()
        .find(".modal-body").html(message).end()
        .modal( backdrop: 'static', keyboard: false )
        .on('hidden.bs.modal', function () 
            modal.unbind();
        );
    if (success) 
        modal.one('click', '.modal-footer .btn-primary', success);
    
    if (cancel) 
        modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
    
;

$(document).on("click", ".delete-event", function (event) 
    event.preventDefault();
    var self = $(this);

    var success = function () 
        $(self.attr("data-form")).submit();
        //self.closest('form').trigger('submit');
    ;

    var cancel = function () 
    ;

    if (self.data('confirmation')) 
        var title = self.data('confirmation-title') ? self.data('confirmation-title') : undefined;
        var message = self.data('confirmation');
        showConfirmation(title, message, success, cancel);
     else 
        success();
    
);

再一次，直到表单提交（通过“成功”委托）的一切都在工作。

当我在定义成功委托的地方放置一个断点并将其中包含的单行代码键入控制台时，它可以完美运行（提交相关表单）。具体来说，输入：

$(self.attr("data-form")).submit()

我已验证 $(self.attr("data-form")) 确实解析为 #ApplicationDelete。

这让我相信我在委托中对表单的引用存在范围问题，但我对 JQuery/javascript 的了解不够多，无法知道 1）是否确实如此，以及 2）如何构造引用，以便它在运行时实际找到表单。我也无法获得在运行时（在委托中）命中的断点，因此该选项似乎对我来说被切断了。

您可能会注意到注释掉的“self.closest...”，我不能在这里使用它，因为我想提交一个不是最接近的表单，但是该代码在另一个不同但相似的应用程序中工作这个。

【参考方案1】：

Welp，这根本不是我想的那样。我更改了模式中按钮的类，没有意识到它们被用作 showConfirmation() 方法中的选择器。

我一解决这个问题，一切正常。