Javascript（jQuery）事件失敗。我怎樣才能解決這個問題？

這個（jQuery）函數在jQuery(document).ready和jQuery(document).resize上被調用。它運行良好的ready條件但resize事件有點棘手。他們要麼繼承功能，要麼就是每次調整大小時滑動窗口看起來都很火。Javascript（jQuery）事件失敗。我怎樣才能解決這個問題？

(function(jQuery){ 
    jQuery.fn.responsive = function() { 
     // Vars 
     var menuButton = jQuery('nav #menu-button'); 
     var menuItems = jQuery('nav ul'); 
     var menuLinks = jQuery('nav ul li a.scroll'); 
     var viewportW = jQuery(window).width(); 
     var viewportH = jQuery(window).height(); 
     // Menu links 
     menuLinks.click(function(e){ 
      if (viewportW > 800) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       var pos = jQuery(this.hash).offset().top; 
       jQuery('html,body').animate({scrollTop: pos}, 1000); 
      } else if (viewportW < 799) { 
       e.stopPropagation(); 
       menuItems.slideUp('fast'); // Hide menu on click 
      } 
     }); 
     // Menu button 
     menuButton.click(function(e){ 
      menuItems.slideToggle('fast'); 
      //e.stopPropagation(); 
      //e.preventDefault(); 
     }); 
    } 
})(jQuery);

我在做什麼錯？我試圖殺死事件傳播，但無濟於事。

編輯：

這將運行後：

// Doc ready 
jQuery(document).ready(function() { 
    // Run functions 
    jQuery().responsive(); 
}); 


// On resize 
jQuery(window).resize(function(){ 
    jQuery().responsive(); 
});

來源

2012-04-16 Niels

我在代碼中看不到.resize（）。 – Bergi 2012-04-16 01:07:18

你真的想要殺死準備好的和/或調整大小的事件嗎？ – Bergi 2012-04-16 01:07:53

當你調用回調函數registation人喜歡$(someElement).click(...)，你實際上是添加該事件的處理程序。如果您使用相同的方法調用該函數兩次，該處理程序會被調用兩次。不要演示，試試這個html頁面（與jquery.js和在同一頁）：

<html> 
<head> 
<script src="jquery.js"></script> 
<script> 
    function addhook() { 
     $("div").click(function(e) { 
      console.info("click!"); 
      $("body").append($("<div>click!</div>")); 
      return false; 
     }); 
    } 

    $(function() { 
     addhook(); 
     $(window).resize(addhook); 
    }); 
</script> 
</head> 
<body> 
<div><a href="#">Click me</a></div> 
</body> 
</html>

在第一次加載頁面時，它的行爲預期，但隨後調整窗口大小，之後點擊「點擊我」變得更比一個「點擊！」。

重新註冊處理程序的唯一原因是各個元素已被銷燬並重新創建。

如果發生這種情況，並且在必要時嘗試可靠地重新註冊處理程序並不方便，請考慮使用delegated events或.live()。

另請注意.off() function可以刪除一組元素上的所有處理程序。

最後，你應該改變

jQuery.fn.responsive = function() {

到

jQuery.responsive = function() {

增加jQuery.fn補充說，可以從jQuery的對象中調用的函數，即允許，也就是說，

$("div").responsive();

由於某些原因，這些功能也被添加到jQuery對象本身，所以它仍然有效，但後者使函數的目的更加清晰，並保持jQuery類的清潔。

來源

2012-04-16 05:13:43

謝謝邁克爾。非常慷慨的解釋！我感謝你的最後一個提示，你的解釋使得泥濘的水域更加清晰。我將遵循這些鏈接，看看我是否無法理解它。 – Niels 2012-04-16 05:26:25

對不起，我誤解你之前質疑。

正如我所看到的，它不需要評估每個調整大小的$。響應（）。

只是

$.fn.responsive = function(){ 
    //Vars 
    var menuButton = $('nav #menu-button'); 
    var menuItems = $('nav ul'); 
    var menuLinks = $('nav ul li a.scroll'); 
    //Menu links 
    menuLinks.click(function(event){ 
     //**move width&height inside 
     var viewportW = $(window).width(); 
     var viewportH = $(window).height(); 
     if(viewportW > 800){ 
      event.preventDefault(); 
      event.stopPropagation(); 
      var pos = $(this.hash).offset().top; 
      $('html,body').animate({scrollTop: pos}, 1000); 
     }else if(viewportW < 799){ 
      event.stopPropagation(); 
      menuItems.slideUp('fast');// Hide menu on click 
     } 
    }); 
    //Menu button 
    menuButton.click(function(event){ 
     menuItems.slideToggle('fast'); 
     //event.stopPropagation(); 
     //event.preventDefault(); 
    }); 
}

然後

$(document).ready(function(){ 
    //just once 
    $.fn.responsive(); 
});

來源

2012-04-16 03:16:33 tym1193

這將打印「調整大小」控制檯。你是否想在'resize'中運行我的函數？這背後的想法是什麼？ – Niels 2012-04-16 03:59:48

@NielsOeltjen獲得當前寬度和高度每次點擊，而不是調整大小 – tym1193 2012-04-16 05:30:47

Javascript（jQuery）事件失敗。我怎樣才能解決這個問題？

回答

相關問題