Question

在jQuery(document).ready和jQuery(document).resize上调用此（jQuery）函数。它在ready条件下运行良好，但在resize上事件变得有点棘手。它们要么继承功能，要么在每次调整大小时看起来像是fireToggle。

(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();
});

Answer 1

抱歉，我之前误解了你的问题。

正如我所知，每次调整大小都不需要评估 $ .response（）。

刚

$.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();
});

Answer 2

当您调用其中一个回调注册函数（例如$(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类保持干净。

Javascript（jQuery）事件失败。我怎样才能解决这个问题？

2 个答案: