jQuery：如何在页面重载后仅触发一次事件？下拉选择遇循环重载问题

Let's break down how to solve your problem step by step—first stopping that annoying loop reload, then making sure your logic runs exactly once when the page loads, plus works correctly on select changes.

First: Diagnose the Loop Reload #

That never-ending reload is almost certainly coming from one of two places:

1. You accidentally included location.reload() (or similar page-refresh code) inside your selection handler. If that's the case, yank it out—you don't need to reload the page just to show/hide a div!
2. Your event binding code is running multiple times (e.g., included in a loop, or loaded twice on the page), causing the change event to fire repeatedly and trigger unintended refreshes.

Solution Code (Native JS) #

Here's a clean implementation that avoids the loop and handles the initial page load trigger:

// Grab your elements once when the DOM is ready
document.addEventListener('DOMContentLoaded', function() {
  const pricingSwitcher = document.querySelector('.edd-variable-pricing-switcher');
  const privateLicenceDiv = document.querySelector('.chackout-licence-private');

  // Reusable handler function for selection changes
  function handlePricingSelection(selectedValue) {
    // Handle the '1' case first
    if (selectedValue === '1') {
      privateLicenceDiv.style.display = 'block';
    } else {
      // Add logic for other values here (e.g., hide the div or call another function)
      privateLicenceDiv.style.display = 'none';
      // Example: runAnotherFunctionForOtherValues();
    }
  }

  // 1. Run the handler ONCE when the page loads (to match the initial selected value)
  handlePricingSelection(pricingSwitcher.value);

  // 2. Bind the change event (this will only run when the user actually changes the selection)
  pricingSwitcher.addEventListener('change', function() {
    handlePricingSelection(this.value);
  });
});

jQuery Alternative (If You're Using It) #

If your project uses jQuery, this does the same thing with a more familiar syntax:

$(document).ready(function() {
  const $pricingSwitcher = $('.edd-variable-pricing-switcher');
  const $privateLicenceDiv = $('.chackout-licence-private');

  function handlePricingSelection(selectedValue) {
    if (selectedValue === '1') {
      $privateLicenceDiv.show();
    } else {
      $privateLicenceDiv.hide();
      // Example: $otherElement.doSomething();
    }
  }

  // Initial one-time trigger on page load
  handlePricingSelection($pricingSwitcher.val());

  // Bind change event for user interactions
  $pricingSwitcher.on('change', function() {
    handlePricingSelection($(this).val());
  });
});

Key Fixes & Explanations #

• No more loops: By removing any page-refresh code and ensuring the event is bound only once (inside DOMContentLoaded or $(document).ready()), you eliminate repeated triggers.
• One-time initial run: We explicitly call the handler with the select's current value when the page loads—this ensures the div is in the correct state right away, without waiting for a user to change the selection.
• Reusable logic: Putting the selection handling in a separate function keeps your code clean and easy to update if you need to add more cases later.

If You Must Reload the Page (Rare Case) #

If for some reason you can't avoid reloading the page when the selection changes (e.g., server-side updates are required), use sessionStorage to prevent loops:

document.addEventListener('DOMContentLoaded', function() {
  const pricingSwitcher = document.querySelector('.edd-variable-pricing-switcher');
  const lastSelectedValue = sessionStorage.getItem('lastPricingValue');
  const currentValue = pricingSwitcher.value;

  function handleSelectionAndReload(value) {
    // Update your div first
    if (value === '1') {
      document.querySelector('.chackout-licence-private').style.display = 'block';
    }
    // Store the value to avoid loops
    sessionStorage.setItem('lastPricingValue', value);
    // Only reload if the value actually changed
    if (value !== lastSelectedValue) {
      location.reload();
    }
  }

  // Initial run on page load
  handleSelectionAndReload(currentValue);

  // Bind change event
  pricingSwitcher.addEventListener('change', function() {
    handleSelectionAndReload(this.value);
  });
});

This checks if the current selection matches the last one stored in sessionStorage—if it does, it skips the reload, breaking the loop.

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