多重复ID触发Off-Canvas弹窗的JavaScript实现问题

Hey there! I see you're working on an app where you need to trigger the same off-canvas popup with corresponding block data when clicking on repeated table blocks. Let's fix that dynamic ID trigger issue together.

The Core Problem #

Your original code used a fixed ID kt_quick_notifications_toggle for the trigger, so the KTOffcanvas instance only bound to the first matching element. With dynamic IDs like kt_quick_notifications_toggle{{$t['table_number']}}, we can't hardcode the ID in the toggleBy option anymore. Plus, since you want to reuse the same popup with block-specific data, we need a way to pass that data when triggering the popup.

Solution: Use Event Delegation + Data Attributes (Cleanest Approach) #

Instead of relying on dynamic IDs, we'll use a shared class for all triggers and store block data in HTML data-* attributes. This is more flexible and efficient than managing dynamic IDs.

Step 1: Update Your HTML

Add a shared class (e.g., table-offcanvas-trigger) to all your trigger buttons, and store the block's data in a data-* attribute (we'll use JSON for full data, but you can start with just the table number if needed):

<!-- Each repeated table block trigger -->
<div class="table-block">
  <button 
    class="table-offcanvas-trigger"
    data-table-number="{{$t['table_number']}}"
    data-table-data='@json($t)' <!-- If using PHP, this converts the table object to JSON -->
  >
    Open Table Details
  </button>
</div>

<!-- Your single shared off-canvas popup -->
<div id="kt_quick_notifications_offcanvas" class="offcanvas">
  <div class="offcanvas-header">
    <h3>Table <span id="popup-table-number"></span> Details</h3>
    <button id="kt_quick_notifications_close" class="offcanvas-close">×</button>
  </div>
  <div class="offcanvas-body" id="popup-table-content">
    <!-- Dynamic content will go here -->
  </div>
</div>

Step 2: Update Your JavaScript

We'll initialize the off-canvas once, then use event delegation to handle clicks on any trigger, update the popup with the correct data, and open it:

// Initialize the shared off-canvas instance (no need for toggleBy now)
const offCanvasElement = document.getElementById('kt_quick_notifications_offcanvas');
const _offcanvasObject = new KTOffcanvas(offCanvasElement, {
  overlay: true,
  baseClass: 'offcanvas',
  placement: 'right',
  closeBy: 'kt_quick_notifications_close'
});

// Use event delegation on a parent container (replace with your actual container)
const tableBlocksContainer = document.querySelector('.table-blocks-container');

tableBlocksContainer.addEventListener('click', function(e) {
  // Find the closest trigger button (in case the click is on a child element)
  const trigger = e.target.closest('.table-offcanvas-trigger');
  if (!trigger) return; // Exit if the click wasn't on a trigger

  // Extract the table data from the data attribute
  const tableNumber = trigger.dataset.tableNumber;
  const tableData = JSON.parse(trigger.dataset.tableData);

  // Update the popup's content with the block-specific data
  document.getElementById('popup-table-number').textContent = tableNumber;
  document.getElementById('popup-table-content').innerHTML = `
    <p>Status: ${tableData.status}</p>
    <p>Guests: ${tableData.guest_count}</p>
    <p>Order: ${tableData.current_order}</p>
    <!-- Add any other fields you need to display -->
  `;

  // Open the off-canvas popup
  _offcanvasObject.show();
});

Alternative: If You Want to Keep Dynamic IDs #

If you prefer to stick with dynamic IDs, you can loop through all trigger elements and bind click events to each one:

// Initialize the shared off-canvas instance
const offCanvasElement = document.getElementById('kt_quick_notifications_offcanvas');
const _offcanvasObject = new KTOffcanvas(offCanvasElement, {
  overlay: true,
  baseClass: 'offcanvas',
  placement: 'right',
  closeBy: 'kt_quick_notifications_close'
});

// Get all triggers with IDs starting with your prefix
const triggers = document.querySelectorAll('[id^="kt_quick_notifications_toggle"]');

triggers.forEach(trigger => {
  trigger.addEventListener('click', function() {
    // Extract the table number from the ID (e.g., "kt_quick_notifications_toggle123" → "123")
    const tableNumber = this.id.replace('kt_quick_notifications_toggle', '');
    // Or get data from a data attribute (more reliable than parsing IDs)
    const tableData = JSON.parse(this.dataset.tableData);

    // Update popup content (same as above)
    // ...

    // Open the popup
    _offcanvasObject.show();
  });
});

Why This Works #

• Event delegation lets us handle clicks on dynamically added elements without reinitializing the off-canvas instance every time.
• Data attributes keep block-specific data tied directly to the trigger, making it easy to pass to the popup.
• We only initialize one off-canvas instance, which is efficient and ensures we're always using the same popup.

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