Document.on("Submit") 没有按预期工作答案

【问题标题】：Document.on("Submit") is not working as expectedDocument.on("Submit") 没有按预期工作
【发布时间】：2018-01-16 20:17:36
【问题描述】：

我有一个简单的表单，我们需要在其中输入详细信息，在提交时，它会点击控制器并返回确认消息。

我的问题是，提交按钮永远不会点击 Jquery .on 提交功能。以下是我的代码。

 <form id="form1" action="" method="post" enctype="multipart/form-data" data-ajax-form class='contact_us'>
                                            <input type="text" name="fname" id="fname" placeholder="Full Name" class="form-control">
                                            <input type="text" name="fphone" id="fphone" placeholder="_____-______" class="form-control">
                                            <input type="email" name="femail" id="femail" placeholder="your@email.com" class="form-control">
                                            <input class="online_deal_form form-control" id="send1" type="submit" value="View Online Quote">
                                        </form>

以下是我的 jquery 代码：

 $(document).on("submit","[data-ajax-form]",function(e) {
            e.preventDefault();
            $('#loaderSVG').show();
            var $form = $(this);
            var data = $form.serialize();
// does an ajax call to controller
...
});

它没有点击 jquery 函数，而是直接回发到控制器，这给了我一个 IIS 404 错误。

我在一个页面上存在多个具有不同类名的表单，因此我使用data-ajax-form 并处理提交事件。

我不完全知道我做错了什么。

感谢任何帮助！

谢谢

【问题讨论】：

你为什么不用$("[data-ajax-form]").submit()？
@Luca 与 Luca 相同，但 $("[data-ajax-form]").on('submit', function(e) {}); ??如果您进行此更改，会有所不同吗？
@Luca: 给定属性是data-ajax-form 我猜测表单是使用 AJAX 加载的，所以在页面加载时不在 DOM 中。因此，$("[data-ajax-form]") 不会选择它。 $(document).on("submit","[data-ajax-form]"); 将。
@Mike 与表单是通过 AJAX 加载还是硬编码到页面中无关。我不明白你的假设。
@Mike 我怀疑data-ajax-form 意味着它应该使用 AJAX 提交，而不是通过 AJAX 加载。但是委托也适用于静态元素（只是没有必要），所以这应该有效。

标签： javascript jquery asp.net-mvc razor

【解决方案1】：

我能够找到解决此问题的替代方法。

$(document).on("submit","[data-ajax-form]",function(e) {
            e.preventDefault();
            $('#loaderSVG').show();
            var $form = $(this);
            var data = $form.serialize();
// does an ajax call to controller
...
});

改为

 $("form").submit(function(e) {
            e.preventDefault();
            $('#loaderSVG').show();
            var $form = $(this);
            var data = $form.serialize();
// does an ajax call to controller
...
});

这解决了我的问题。谢谢大家的建议

【讨论】：