同一页面多表单jQuery Ajax问题：始终获取首个表单event_id

我在WordPress主题中使用jQuery和Bootstrap实现了多个活动报名表单，表单为动态生成，通过event_id区分不同活动。但现在遇到一个问题：无论点击哪个表单的提交按钮，控制台始终显示最上方表单的event_id=2528，无法获取当前提交表单对应的event_id，已经被这个问题困扰数日，恳请解决。

HTML代码 #

<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2528">
        <input type="hidden" name="event_id" id="event_id_2528" value="2528">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2528">Sign Up</button>
    </form>
</div>

<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2526">
        <input type="hidden" name="event_id" id="event_id_2526" value="2526">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2526">Sign Up</button>
    </form>
</div>

<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2523">
        <input type="hidden" name="event_id" id="event_id_2523" value="2523">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2523">Sign Up</button>
    </form>
</div>

当前jQuery代码 #

jQuery(".join_race_form").validate({
    submitHandler: function(form) {
        var event_id = jQuery('input[name="event_id"]').val();
        var data = {
            'action': 'join_race',
            'event_id': event_id
        };

        jQuery.post(ajax.url, data, function(res) {
            var response = JSON.parse(res);
            var status = response.error;
            var join = response.join;
            var message = response.message;
            var btn_type = response.btn_type;
            if(status === false){
                jQuery('#join_race_btn_'+ event_id ).text(join);
                console.log(event_id);
            }
        });

        return false;
    }
});

解决方案 #

问题核心：jQuery('input[name="event_id"]').val()是全局选择器，会直接选取页面中第一个匹配name="event_id"的元素，所以无论提交哪个表单，都会拿到最上方的2528。

修改方法：利用submitHandler回调中的form参数（当前提交的表单DOM对象），限定查找范围在当前表单内：

1. 将获取event_id的代码改为：

var event_id = jQuery(form).find('input[name="event_id"]').val();

2. 额外注意：代码中按钮ID是remove_race_btn_{event_id}，但回调里用的是#join_race_btn_'+ event_id，这里存在ID不匹配的问题，需要将其修正为对应按钮的ID：

jQuery('#remove_race_btn_'+ event_id ).text(join);

修改后的完整jQuery代码：

jQuery(".join_race_form").validate({
    submitHandler: function(form) {
        // 限定在当前提交的表单内查找event_id
        var event_id = jQuery(form).find('input[name="event_id"]').val();
        var data = {
            'action': 'join_race',
            'event_id': event_id
        };

        jQuery.post(ajax.url, data, function(res) {
            var response = JSON.parse(res);
            var status = response.error;
            var join = response.join;
            var message = response.message;
            var btn_type = response.btn_type;
            if(status === false){
                // 修正按钮ID匹配问题
                jQuery('#remove_race_btn_'+ event_id ).text(join);
                console.log(event_id);
            }
        });

        return false;
    }
});

内容的提问来源于stack exchange，提问作者David G