同一页面上有多个表单的 jQuery ajax 问题 - 始终选择第一个表单

Question

我已经为这个（很可能很简单）问题苦苦挣扎了几天。 任何帮助将不胜感激。

我有一个页面，上面有多个表单按钮，供人们报名参加活动。表单按钮列表是动态创建的，我使用 event_id 值来区分表单按钮。

jQuery 代码似乎总是获取页面上最上面的 event_id 值，而不是表单内传递的 event_id。

这是使用 jQuery 和 Bootstrap 的 WordPress 主题。每次我提交任何按钮时，它都会在控制台中显示 event_id = 2528。

非常感谢任何帮助，因为我已经尝试了我想的一切。

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;
        }
    });

Answer 1

jQuery('input[name="event_id"]')

与您当前定位的表单没有上下文，因此它只会抓取页面中的第一个表单。假设

form

是对当前循环中的表单元素的引用，然后更新它以查询它应该修复它：

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