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）事件失败。我怎样才能解决这个问题？

回答

相关问题