Gravity Forms Repeater插件点击添加按钮时触发jQuery错误

I’ve dealt with similar headaches from abandoned Gravity Forms add-ons, especially when forms are loaded dynamically in modals like Fancybox. Let’s break down how to fix this specific error:

Root Cause #

The error pops up for two key reasons:

1. The Repeater add-on’s JavaScript initializes on page load, but your form is loaded later in a Fancybox popup—so the repeater field never gets registered in the gfRepeater_repeaters global array when the modal opens.
2. The add-on’s outdated code (it only supports up to WordPress 4.4.15) doesn’t play nice with newer Gravity Forms or jQuery behavior, especially for dynamic DOM elements.

Step-by-Step Fixes #

1. Re-Initialize the Repeater After Fancybox Loads #

Since your form is dynamic, you need to trigger the repeater’s setup after the popup is fully visible. Add this code to your theme’s custom JS file or functions.php:

jQuery(document).ready(function($) {
    // Listen for Fancybox's after-show event
    $(document).on('afterShow.fb', function() {
        // Re-run the repeater initialization if the function exists
        if (typeof gfRepeater_init !== 'undefined') {
            gfRepeater_init();
        }
    });
});

This ensures the repeater recognizes the dynamically loaded form fields and populates the gfRepeater_repeaters array correctly.

2. Fix the Add-On’s Broken Click Handler #

If the first step doesn’t resolve the error, the issue is likely the add-on’s outdated click logic that relies on a broken array index lookup. Modify the gf-repeater.js file (found in /wp-content/plugins/gravityforms-repeater/js/) to use field ID matching instead:

Replace the original add-row click handler (usually around lines 50-60) with this:

// Replace old .live() handler with .on() for dynamic elements
$(document).on('click', '.add_row', function(){
    var fieldRel = $(this).attr('rel');
    var repeater = null;

    // Find the repeater config by its ID instead of array index
    for (var i = 0; i < gfRepeater_repeaters.length; i++) {
        if (gfRepeater_repeaters[i].id === fieldRel) {
            repeater = gfRepeater_repeaters[i];
            break;
        }
    }

    // Exit if no matching config is found
    if (!repeater) {
        console.error('Repeater config not found for field:', fieldRel);
        return;
    }

    // Paste the rest of the original add-row logic here (keep all code that uses the 'repeater' variable)
    // ... (original code for cloning rows, updating indexes, etc.)
});

This fixes the undefined error by directly matching the field to its configuration, instead of relying on a potentially incorrect array index.

3. Ensure Add-On Assets Load Globally #

If your form loads via AJAX, make sure the repeater’s CSS and JS are loaded on every page (not just the page hosting the form). Add this to your theme’s functions.php:

function enqueue_repeater_global_assets() {
    $plugin_path = plugin_dir_path(__FILE__);
    wp_enqueue_script('gf-repeater', plugins_url('js/gf-repeater.js', $plugin_path . '../gravityforms-repeater/gravityforms-repeater.php'), array('jquery'), '1.0.9', true);
    wp_enqueue_style('gf-repeater', plugins_url('css/gf-repeater.css', $plugin_path . '../gravityforms-repeater/gravityforms-repeater.php'), array(), '1.0.9');
}
add_action('wp_enqueue_scripts', 'enqueue_repeater_global_assets');

Adjust the file paths if your plugin directory structure differs.

Notes #

• Since the add-on is abandoned, consider migrating to a supported repeater solution for Gravity Forms long-term. But these fixes should get it working in your current environment.
• Always back up your site before modifying plugin files—if you ever update the add-on (unlikely, since it’s discontinued), your changes will be overwritten.

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