如何迭代相同 class 的每种形式并使用 jQuery 唯一地处理提交？

Question

我在同一页面上有多个表单 class form_delete。

如何遍历 jQuery 中的这些表单，添加将唯一应用于每个表单的 submit 事件？

我已经使用 $('.form_delete').each(...); 尝试过此操作，但是当我添加 $(this).submit(...) 事件时它不起作用（事件未注册）。

表格：

<form class="form_delete">
</form>

<form class="form_delete">
</form>

<form class="form_delete">keep adding n forms to infinity ;)

jQuery:

$('.form_delete').each(function() {
    $(this).submit( function(event) { 
        // Nothing gets registered here
    });
}

Answer 1

$('.form_delete').each(function() {
    $(this).on("submit", function(e) { // submit button pressed
        // prevent form from doing what it normally does when submit button is pressed
        e.preventDefault();

        // do anything else that you want to do when the submit button is pressed
        alert( "Hi");

    });
});

Answer 2

我不知道你为什么要用.each();无论如何，如果所有具有相同 class 的表格只使用

$('.form_delete').on('submit',function(e){
    e.preventDefault();
    alert($(this).index());
    return false;
});

在这种情况下，您将需要像 data-selectForm 这样的东西来定义您提交的表单

<form class="form_delete" data-selectForm="firstform">
</form>

<form class="form_delete" data-selectForm="secondform">
</form>

然后使用

$('.form_delete').on('submit',function(e){
        e.preventDefault();
        alert($(this).data('selectForm'));
        return false;
    });

Answer 3

jQuery的event delegation也是一个选项。

    $('body').on('submit', '.form_delete', function submitCB(e) {
       e.preventDefault();  
    });

当事件冒泡到 body 时，jQuery 将根据字符串选择器（parm 2）检查 target 元素，并且仅在以下情况下调用回调（parm3）它匹配。

这样你在页面上只有一个事件侦听器，而不是很多。

如何迭代相同 class 的每种形式并使用 jQuery 唯一地处理提交？

How to iterate each form of same class and handle submits uniquely with jQuery?

javascript

forms

jquery

form-submit