动态内容中按钮链接失效的解决方案

<div class="main">
    <div class="up">
        <button class="card1">
            <i class="fab fa-instagram instagram" aria-hidden="true"></i>
        </button>
        <button class="card2">
            <i class="fab fa-facebook facebook" aria-hidden="true"></i>
        </button>
    </div>
    <div class="down">
        <button class="card3">
            <i class="fas fa-phone-alt" aria-hidden="true"></i>
    </button>
    </div>
</div>

// ... (部分JS代码) ...
function openInNewTab(url) {
    const win = window.open(url, '_blank');
    if (win) { // Check if window was opened successfully
        win.focus();
    }
}

// ... (在DOMContentLoaded事件监听器内部) ...
if (comercio) {
    // ... (其他元素填充) ...

    // 尝试获取并填充电话信息（注意：HTML中缺少对应的元素）
    var telefonoLabelElement = document.getElementById('tel-label');
    telefonoLabelElement.textContent = 'Teléfono:';
    telefonoLabelElement.classList.add('label-style');

    var telefonoDescripcionElement = document.getElementById('tel-descripcion');
    telefonoDescripcionElement.innerHTML = '<a href="tel:' + comercio.tel + '">' + comercio.tel + '</a>';
    telefonoDescripcionElement.classList.add('info-style');

    // 绑定按钮点击事件
    var instagramCard = document.querySelector('.card1');
    if (comercio.instagram) {
        instagramCard.addEventListener('click', function () {
            openInNewTab(comercio.instagram);
        });
    }

    var facebookCard = document.querySelector('.card2');
    if (comercio.facebook) {
        facebookCard.addEventListener('click', function () {
            openInNewTab(comercio.facebook);
        });
    }

    var telefonoCard = document.querySelector('.card3');
    if (comercio.tel) {
        telefonoCard.addEventListener('click', function () {
            openInNewTab(comercio.tel); // 问题所在：电话号码不应直接用openInNewTab
        });
    }
}

<div class="info-container">
    <div class="horario-info">
        <h6 id="horario-label"></h6>
        <p id="horario-descripcion"></p>
    </div>
</div>

<div class="info-container">
    <div class="horario-info">
        <h6 id="horario-label"></h6>
        <p id="horario-descripcion"></p>
    </div>
    <!-- 新增的电话信息显示区域 -->
    <div class="telefono-info">
        <h6 id="tel-label"></h6>
        <p id="tel-descripcion"></p>
    </div>
</div>

window.addEventListener('DOMContentLoaded', function () {
    var queryParams = new URLSearchParams(window.location.search);
    var comercioId = queryParams.get('comercios');

    // ... (商家数据数组定义) ...

    var comercio = comercios.find(function (c) {
        return c.id === comercioId;
    });

    // 辅助函数：安全地打开新标签页
    function openInNewTab(url) {
        if (url) { // 确保URL存在
            const win = window.open(url, '_blank');
            if (win) {
                win.focus();
            } else {
                console.warn('Pop-up blocked or failed to open new tab for URL:', url);
            }
        }
    }

    if (comercio) {
        document.getElementById('comercio-titulo').textContent = comercio.titulo;
        document.getElementById('comercio-descripcion').textContent = comercio.descripcion;
        document.getElementById('comercio-imagen').src = comercio.imagen;
        document.body.style.backgroundImage = 'url(' + comercio.fondo + ')';

        // 处理营业时间信息
        var horarioLabelElement = document.getElementById('horario-label');
        if (horarioLabelElement) { // 检查元素是否存在
            horarioLabelElement.textContent = 'Horario:';
            horarioLabelElement.classList.add('label-style');
        }

        var horarioDescripcionElement = document.getElementById('horario-descripcion');
        if (horarioDescripcionElement) { // 检查元素是否存在
            horarioDescripcionElement.textContent = comercio.horario;
            horarioDescripcionElement.classList.add('info-style');
        }

        // 处理电话信息显示 (现在HTML中已存在这些元素)
        var telefonoLabelElement = document.getElementById('tel-label');
        if (telefonoLabelElement) { // 检查元素是否存在
            telefonoLabelElement.textContent = 'Teléfono:';
            telefonoLabelElement.classList.add('label-style');
        }

        var telefonoDescripcionElement = document.getElementById('tel-descripcion');
        if (telefonoDescripcionElement) { // 检查元素是否存在
            telefonoDescripcionElement.innerHTML = '<a href="tel:' + comercio.tel + '">' + comercio.tel + '</a>';
            telefonoDescripcionElement.classList.add('info-style');
        }

        // 绑定Instagram按钮点击事件
        var instagramCard = document.querySelector('.card1');
        if (comercio.instagram && instagramCard) { // 检查链接和按钮元素是否存在
            instagramCard.addEventListener('click', function () {
                openInNewTab(comercio.instagram);
            });
        }

        // 绑定Facebook按钮点击事件
        var facebookCard = document.querySelector('.card2');
        if (comercio.facebook && facebookCard) { // 检查链接和按钮元素是否存在
            facebookCard.addEventListener('click', function () {
                openInNewTab(comercio.facebook);
            });
        }

        // 绑定电话按钮点击事件 - 重点修改
        var telefonoCard = document.querySelector('.card3');
        if (comercio.tel && telefonoCard) { // 检查电话号码和按钮元素是否存在
            telefonoCard.addEventListener('click', function () {
                // 对于电话拨号，直接使用 'tel:' 协议设置 window.location.href
                window.location.href = 'tel:' + comercio.tel;
                // 注意：通常不建议为电话链接使用 _blank，因为它会尝试在新标签页中打开拨号应用，用户体验可能不佳。
                // 如果非要新开，可以使用 window.open('tel:' + comercio.tel); 但浏览器可能会阻止。
            });
        }
    } else {
        document.body.innerHTML = '<h1>Comercio no encontrado</h1>';
    }
});