Foundation Reveal模态框内jQuery函数失效问题求助

Let's troubleshoot why your updateSizes function isn't working inside the sizesModal Foundation Reveal modal. Here are the most likely issues and their actionable fixes:

1. Dynamic DOM Context & Selector Scope Issues #

Foundation Reveal modals often inject content dynamically into the DOM, which means your global jQuery selectors might be targeting elements outside the modal (or failing to find them entirely). The fix is to scope all selector queries to the modal itself to avoid conflicts and ensure you're grabbing the right inputs.

Updated updateSizes Function #

function updateSizes() {
  var sizeString = '';
  var previewContent = '';
  // Target the modal explicitly to scope all selector queries
  const $modal = jQuery("#sizesModal");

  for (var i = 1; i <= 12; i++) {
    const sizeInput = $modal.find(`#size${i}`);
    const qtyInput = $modal.find(`#qty${i}`);
    const sizeVal = sizeInput.val().trim();
    const qtyVal = qtyInput.val().trim();

    // Only add valid, non-empty size-qty pairs
    if (sizeVal && qtyVal) {
      sizeString += `${sizeVal}:${qtyVal},`;
      // Build preview HTML for the "Sizes & Qty Preview" section
      previewContent += `<div class="size-preview-item"><strong>${sizeVal}</strong>: ${qtyVal} units</div>`;
    }
  }

  // Remove trailing comma if the string isn't empty
  if (sizeString.length > 0) {
    sizeString = sizeString.slice(0, -1);
  }

  // Update the hidden #sizes input inside the modal
  $modal.find("#sizes").val(sizeString);
  // Render the preview content (fallback if no sizes are added)
  jQuery("#size-qty-preview").html(previewContent || "<p>No sizes added yet.</p>");
}

2. Event Binding for Dynamic Modal Buttons #

If your "Save" button is part of the modal's dynamic content, standard click event bindings won't work—they only attach to elements present on page load. Use event delegation to bind the click event to a static parent element (like the document or modal container):

jQuery(document).ready(function() {
  // Initialize Foundation Reveal modal
  jQuery("#sizesModal").foundation();

  // Delegate click event to the Save button inside the modal
  jQuery(document).on("click", "#sizesModal .save-button", function(e) {
    e.preventDefault();
    updateSizes();
    // Optional: Close the modal after save if needed
    // jQuery("#sizesModal").foundation("close");
  });
});

3. Debugging Tips to Diagnose Further #

If the function still isn't firing, add console logs to pinpoint the issue:

function updateSizes() {
  console.log("updateSizes function triggered!");
  const $modal = jQuery("#sizesModal");
  console.log("Modal exists in DOM:", $modal.length > 0);
  console.log("First size input value:", $modal.find("#size1").val());
  // ... rest of the function
}

Check your browser's DevTools Console to see if these logs appear, and verify if the modal/inputs are being found correctly.

4. Avoid ID Conflicts #

Make sure there are no duplicate #size1, #qty1, etc., IDs on the product page. Duplicate IDs break jQuery selectors, so ensure all modal inputs have unique identifiers (or use classes with data attributes if you need reusability).

With these changes, your function should correctly read inputs from the modal, update the #sizes value, and render the preview content as expected.

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