jQuery的 - 鏈接停止工作後頁面調整

我想讓我的網站響應，並添加了一些jQuery刪除和插入HTML。我試圖在點擊圖片周圍的錨點標籤時顯示一個彈出框。jQuery的 - 鏈接停止工作後頁面調整

該窗口在頁面首次加載時出現，但當它被調整大小時，鏈接不再起作用，並且不顯示彈出窗口。

// 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沒有太多的經驗，我一直在爲這個問題而努力。

謝謝！

來源

2017-07-26 Toby Cook

打開您的控制檯（F12）並查看是否有任何錯誤。 – Taplar

@Taplar出現的唯一錯誤是不使用getPreventDefault（）。改爲使用defaultPrevented，但之前沒有影響。 –

好吧，對於shiggles，將'onclick =「showPopup（）」'更改爲'onclick =「showPopup（this）」'並將您的方法更改爲在元素中接受。當您替換元素時，新元素上的綁定不存在。所以，你所擁有的就是你的onclick內聯綁定。 – Taplar

如果您嘗試使用委託，會發生什麼情況？

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

如果一切正常，那麼你應該嘗試尋找一直存在的imgClick元素的父元素，這是從來沒有更換，並使用它作爲一個選擇，而不是document.body。

來源

2017-07-26 22:27:49 Taplar

一些參考文檔：http://learn.jquery.com/events/event-delegation/ – Taplar

這很好地工作。感謝您的幫助，並使其易於理解！ –

jQuery的 - 鏈接停止工作後頁面調整

回答

相關問題