WordPress动态克隆字段jQuery autocomplete仅初始生效问题求助

Hey Stefano, great question—this is a super common gotcha with dynamic DOM elements and jQuery plugins like autocomplete. Let's break down why this is happening and how to fix it.

Why the Issue Occurs #

When you initialize autocomplete on page load, it only binds to the existing DOM elements (your original search field). Any fields you clone later are added dynamically after the initial binding, so the autocomplete plugin never "sees" them.

Solution 1: Re-Initialize Autocomplete After Cloning #

The simplest fix is to explicitly initialize autocomplete on each new cloned field right after you add it to the form. Here's how to adjust your code (I've added a helper function to avoid repeating code):

jQuery(document).ready(function($) {
  // Helper function to initialize autocomplete (keeps code DRY)
  function initAutocomplete($field) {
    $field.autocomplete({
      source: '/wp-admin/admin-ajax.php?action=your_autocomplete_action', // Replace with your actual AJAX endpoint
      minLength: 2,
      // Add any other autocomplete options you're using here
      select: function(event, ui) {
        $field.val(ui.item.value);
        // Keep your custom select logic here if you have any
      }
    });
  }

  // Initialize autocomplete on the original field
  initAutocomplete($('.search-field').first());

  // Clone button click handler
  $('#clone-button').on('click', function(e) {
    e.preventDefault();
    const currentFields = $('.search-field');
    
    // Stop cloning if we hit the 7-field limit
    if (currentFields.length >= 7) return;

    // Clone the first field, clear its value, and append to the form
    const newField = currentFields.first().clone();
    newField.val('').appendTo('#your-form-container'); // Replace with your form container ID

    // Initialize autocomplete on the new field
    initAutocomplete(newField);
  });
});

Solution 2: Event-Driven Initialization (Lazy Loading) #

If you prefer to set up autocomplete only when the user interacts with a new field (instead of immediately after cloning), use event delegation to listen for the focus event on any .search-field—even dynamic ones. This ensures autocomplete is initialized the first time someone clicks into the field:

jQuery(document).ready(function($) {
  // Use event delegation on the parent container
  $('#your-form-container').on('focus', '.search-field', function() {
    const $field = $(this);
    
    // Only initialize if autocomplete hasn't been set up yet
    if (!$field.data('ui-autocomplete')) {
      $field.autocomplete({
        source: '/wp-admin/admin-ajax.php?action=your_autocomplete_action',
        minLength: 2,
        // Your other autocomplete options here
      });
    }
  });

  // Clone logic (no need to init autocomplete immediately)
  $('#clone-button').on('click', function(e) {
    e.preventDefault();
    const currentFields = $('.search-field');
    if (currentFields.length >= 7) return;

    const newField = currentFields.first().clone();
    newField.val('').appendTo('#your-form-container');
  });
});

Critical Note for Form Submission #

Make sure all your search fields use an array-style name attribute, like name="search_fields[]". This way, when you submit the form, WordPress will receive all values as an array in $_POST['search_fields'], making it easy to loop through them, fetch corresponding database values, and calculate the sum.

For example, your original field should look like:

<input type="text" class="search-field" name="search_fields[]" />

Either approach should get autocomplete working on all cloned fields. Let me know if you hit any WordPress-specific quirks with the AJAX endpoint or form handling!

内容的提问来源于stack exchange，提问作者Stefano baù