Question

Ajax表单的jQuery代码：

$(document).on('submit', $('.ajaxForm'), function (e) { // only the element with class ajaxForm
    e.preventDefault(); // don't submit the form which has the class ajaxForm
});

Form - 1 with class ajaxForm

<form action='_ACTION_' class='ajaxForm'><input type='submit'></form>

表单 - 2 不类ajaxForm

<form action='_ACTION_' method='get'><input type='submit'></form>

表单1按预期工作，但表单2必须以传统方式提交，例如新URL必须为_ACTION_?param=value，但此表单也将作为Ajax表单提交。 jQuery部分有什么错误吗？

虽然两者都相同但我也尝试$('form.ajaxForm')，但没有区别。

Answer 1

.on method的签名是：

.on( events [, selector ] [, data ], handler )

您的选择器应该是字符串（不是包装的jquery节点集）：

$(document).on('submit', '.ajaxForm', function (e) { // only the element with class ajaxForm
    e.preventDefault(); // don't submit the form which has the class ajaxForm
});

Answer 2

虽然sweaver2112完全正确，选择器必须是一个字符串（你很幸运，你可以用一个简单的字符串抓住.ajaxForm），但是在某些情况下你可能想要传递一个对象/变量。

让我们说你想写这样的东西：

$('body').on('mouseenter', $('li').has('span'), function(){…}

对于字符串选择器不是一个选项的情况有一种解决方法，那就是延迟＆＃34; jQuery的复杂性＆＃34; （然后使用if-query检查）使用更通用的选择器：fiddle。

Answer 3

试试这个

$(document).on('submit', '.ajaxForm', function (e) { // only the element with class ajaxForm
        e.preventDefault(); // don't submit the form which has the class ajaxForm
      console.log("hello");
    });

$("#abc").html('<form class="ajaxForm"><input type="submit"> with ajax</form><form ><input type="submit"> without ajax</form>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="abc"></div>

.on（）中的选择器不受尊重

3 个答案: