javascript - jQuery - 页面调整大小后链接停止工作

Question

我正在尝试使我的网站具有响应能力，并添加了一些 jQuery 来删除和插入 HTML。我试图在单击图像周围的 anchor 标记时显示弹出框。

第一次加载页面时会出现该窗口，但调整大小后链接将不再起作用并且不会显示弹出窗口。

    // Call hidePopup function upon clicking element with class ".close"
    $(function() {
        $('.close').click(hidePopup);
    });
    function hidePopup() {
        if (this.id == 'hideP1') {
            $('#popup1').addClass('hidePopups');
        } else if (this.id == 'hideP2') {
            $('#popup2').addClass('hidePopups');
        } else if (this.id == 'hideP3') {
            $('#popup3').addClass('hidePopups');
        }
    }

    // Call showPopup function upon clicking element with class ".imgClick"
    $(function() {
        $('.imgClick').click(showPopup);
    });
    function showPopup() {
        if (this.id == 'imgEms') {
            $('#popup1').removeClass('hidePopups');
        } else if (this.id == 'imgPas') {
            $('#popup2').removeClass('hidePopups');
        } else if (this.id == 'imgTs') {
            $('#popup3').removeClass('hidePopups');
        }
    } 
    var LinkedHtml = [
        '<a href="#popup1" class="imgClick" id="imgEms" onclick="showPopup()"><img src="assets/img/festival-big.jpg" title="Event Medical Services"></a>',
        '<a href="#popup2" class="imgClick" id="imgPas" onclick="showPopup()"><img src="assets/img/ambulance2.png" title="Private Ambulance Services"></a>',
        '<a href="#popup3" class="imgClick" id="imgTs" onclick="showPopup()"><img src="assets/img/training_1.jpeg" title="Training Solutions"></a>'
    ];
    var nonLinkedHtml = [
        '<img src="assets/img/festival-big.jpg" title="Event Medical Services" id="emsImg">',
        '<img src="assets/img/ambulance2.png" title="Private Ambulance Services" id="pasImg">',
        '<img src="assets/img/training_1.jpeg" title="Training Solutions" id="tsImg">'
    ];

    $(window).resize(function() {
        windowSize = $(window).width();
        var anchorIds = ['#imgEms','#imgPas','#imgTs'];
        var imageIds = ['#emsImg','#pasImg','#tsImg'];

        if (windowSize < 740) {
            for (var i = 0; i < imageIds.length; i++) {
                $(imageIds[i]).replaceWith(LinkedHtml[i]);
            } 
        } else if (windowSize > 740) {
            $(".overlay").addClass("hidePopups");
            for (var i = 0; i < anchorIds.length; i++) {
                $(anchorIds[i]).replaceWith(nonLinkedHtml[i]);
            } 
        }
    });

我对 JavaScript 和 jQuery 都没有太多经验，而且我整天都在为这个问题苦苦挣扎。

谢谢!

Answer 1

如果您尝试使用委托(delegate)，会发生什么情况？

$(function() {
    $(document.body).on('click', '.imgClick', showPopup);
});

如果这有效，那么您应该尝试找到一个始终存在于 imgClick 元素且永远不会被替换的父元素，并将其用作选择器而不是 document.body。