Document.on(“提交”)未按预期工作

时间:2018-01-16 20:17:37

标签: javascript jquery asp.net-mvc razor

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

我的问题是,提交按钮永远不会出现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并处理提交事件。

我不知道自己做错了什么。

任何帮助表示赞赏!!

谢谢

1 个答案:

答案 0 :(得分:0)

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

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

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