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

我试图使我的网站响应，并添加了一些jQuery删除和插入HTML。我试图在单击图像周围的锚定标记时显示一个弹出框

该窗口在第一次加载页面时出现，但当页面大小调整后，链接不再工作，也不会显示弹出窗口

    // 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没有太多的经验，我整天都在为这个问题苦苦挣扎

---

谢谢大家!

如果尝试使用代理，会发生什么

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

---

如果这样做有效，那么您应该尝试查找imgClick元素始终存在的父元素，该元素从未被替换，并将其用作选择器，而不是document.body。

打开控制台F12，查看是否有任何错误。@Taplar出现的唯一错误是使用getPreventDefault不推荐使用。改用defaultPrevented。但这以前并没有影响它。好吧，对于shiggles，将onclick=showPopup更改为onclick=showPopupthis，并将您的方法更改为在元素中接受。替换元素时，新元素上的绑定不存在。因此，您所拥有的只是onclick内联绑定。或者，如果要替换的所有元素都有一个公共父级，您可以将绑定更改为委托绑定，以后是否替换它们也无所谓。@Taplar不幸没有成功。我会试试你最新的方法，效果很好。感谢您的帮助，使之易于理解！