JavaScript动态生成JSON产品交互式模态框问题：点击触发按钮无响应及ARIA错误求助

Hey there, let's break down what's causing your issues and fix them step by step:

Root Causes of the Problem #

Your code has three critical issues that are breaking the modal functionality and triggering the ARIA error:

1. Incorrect Bootstrap Modal Structure: The modal-footer was placed outside the modal-dialog/modal-content hierarchy, which Bootstrap's JS relies on to initialize modals properly.
2. Redundant jQuery Trigger Code: You're already using Bootstrap's native data-bs-toggle and data-bs-target attributes—adding extra jQuery click logic creates conflicts.
3. HTML Syntax Error: A stray </p> tag in your product container was corrupting the DOM structure.
4. Invalid ID Handling: Using product names with spaces as modal IDs violates HTML rules (IDs can't have spaces), and the misplaced footer caused focusable buttons to live inside an aria-hidden="true" element, triggering the accessibility error.

Fixed Code #

let http = new XMLHttpRequest();
http.open('get', 'recipe.json', true);
http.send();
http.onload = function () {
    if (this.readyState == 4 && this.status == 200) {
        let products = JSON.parse(this.responseText);
        let output = "";
        for (let item of products) {
            // Clean up HTML structure and fix modal hierarchy
            output += `
            <div class="product">
                <img src="${item.imageURL}" alt="${item.name}">
                <p class="title">${item.name}</p>
                <button type="button" class="btn btn-primary modaltrigger" 
                        data-bs-toggle="modal" 
                        data-bs-target="#modal-${item.name.replace(/\s+/g, '-')}">
                    Get Recipe
                </button>
            </div>
            <!-- Proper Bootstrap Modal Structure -->
            <div class="modal fade" id="modal-${item.name.replace(/\s+/g, '-')}" tabindex="-1" 
                 aria-labelledby="${item.name.replace(/\s+/g, '-')}-label" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="${item.name.replace(/\s+/g, '-')}-label">${item.name}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ${item.data}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            `;
        }
        document.querySelector(".products").innerHTML = output;
    }
}
// Removed redundant jQuery click handler—Bootstrap's native attributes handle triggering

What Changed & Why #

1. Fixed Modal Hierarchy: Moved modal-footer inside modal-content (correct structure: modal → modal-dialog → modal-content → modal-body + modal-footer). This lets Bootstrap's JS properly initialize the modal and resolves the ARIA error by keeping focusable elements within the accessible modal context.
2. Removed Conflicting jQuery Code: Bootstrap's data-bs-* attributes natively handle modal triggering, so the extra click listener was unnecessary and causing conflicts.
3. Cleaned Up HTML: Removed the stray </p> tag that was breaking the DOM.
4. Valid IDs: Added a modal- prefix and replaced spaces in product names with hyphens using replace(/\s+/g, '-')—HTML IDs can't contain spaces, which was causing hidden issues.
5. Improved Accessibility: Added a proper aria-labelledby link to the modal title and a labeled close button for better screen reader support, eliminating the ARIA error entirely.
6. Semantic Alt Text: Changed the image alt attribute from the image URL to the product name for better accessibility.

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