如何使用jQuery在元素被点击时查找其父表单元素？

要实现点击"Order Now"按钮时找到它的父表单元素，我们可以利用jQuery的事件绑定和DOM遍历方法来完成，以下是具体的实现方案：

基础实现：点击按钮时立即查找父表单 #

首先，我们给目标按钮绑定点击事件，然后通过.closest()方法向上查找最近的<form>元素：

// 绑定按钮点击事件（支持动态生成的按钮）
$(document).on('click', '.btn-popup[data-popup-open="popup-1"]', function(e) {
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    
    // 向上查找当前点击元素的最近父表单
    const parentForm = $(this).closest('form');
    
    // 根据是否找到表单做后续处理
    if (parentForm.length > 0) {
        console.log('成功找到父表单:', parentForm);
        // 示例：获取表单ID
        console.log('表单ID:', parentForm.attr('id'));
        // 示例：序列化表单数据
        console.log('表单数据:', parentForm.serialize());
    } else {
        console.warn('未找到父表单元素，请检查DOM结构');
    }
});

进阶场景：弹窗表单与原父表单交互 #

如果你的需求是弹窗中的表单需要和原按钮的父表单进行数据交互（比如合并数据提交到服务器），可以将父表单的引用存储起来，供弹窗使用：

// 存储当前点击按钮对应的父表单引用
let currentParentForm;

// 点击Order Now按钮时获取父表单并打开弹窗
$(document).on('click', '.btn-popup[data-popup-open="popup-1"]', function(e) {
    e.preventDefault();
    currentParentForm = $(this).closest('form');
    // 显示弹窗（根据你的弹窗逻辑调整）
    $('.popup[data-popup="popup-1"]').addClass('active');
});

// 弹窗中提交按钮的点击事件
$(document).on('click', '.popup .submit-btn', function(e) {
    e.preventDefault();
    
    if (!currentParentForm) {
        alert('未找到关联的父表单');
        return;
    }
    
    // 合并原表单和弹窗表单的数据
    const originalData = currentParentForm.serialize();
    const popupFormData = $(this).closest('form').serialize();
    const combinedData = `${originalData}&${popupFormData}`;
    
    // 发送数据到服务器
    $.ajax({
        url: '/your-submit-url',
        method: 'POST',
        data: combinedData,
        success: function(response) {
            console.log('数据提交成功:', response);
            // 关闭弹窗
            $('.popup[data-popup="popup-1"]').removeClass('active');
        },
        error: function(xhr) {
            console.error('提交失败:', xhr.responseText);
        }
    });
});

关键方法说明 #

• $(document).on('click', selector, handler)：使用事件委托绑定点击事件，确保即使按钮是动态生成的（比如通过AJAX加载）也能触发事件。如果按钮是静态DOM元素，也可以直接用$('.btn-popup[data-popup-open="popup-1"]').click(handler)。
• e.preventDefault()：阻止a标签默认的锚点跳转行为，避免页面滚动到顶部。
• .closest('form')：从当前元素开始向上遍历DOM树，返回第一个匹配<form>的元素，这是查找父级表单最可靠的方法（相比.parent()或.parents()，它只会返回最近的匹配元素）。

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