Home/ Questions/Q 7784275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T20:04:09+00:00

This (jQuery) function is invoked on jQuery(document).ready and jQuery(document).resize . It runs fine on

  • 0

This (jQuery) function is invoked on jQuery(document).ready and jQuery(document).resize. It runs fine on the ready condition but on resize the events go a bit screwy. They either inherit functionality or in the case of the slideToggle seemingly fire for each resize.

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

What am I doing wrong? I have tried to kill event propagation but to no avail.

EDIT:

This runs after:

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


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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you call one of the callback registation functions likes $(someElement).click(...), you are actually adding a handler for that event. If you call the function twice with the same, the handler gets called twice. Do demonstrate, try this html page (with jquery.js in the same page):

    <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>

    On first loading the page, it behaves as expected, but then after resizing the window, clicking “Click me” gets more than one “click!”.

    The only reason you would have for re-registering a handler is if the respective elements have been destroyed and re-created.

    If this is happening, and it’s not convenient to attempt to reliably re-register the handlers when necessary, consider using delegated events or .live().

    Also note the .off() function which can remove all of the handlers on a set of elements.

    Lastly, you should probably change

    jQuery.fn.responsive = function() {

    to

    jQuery.responsive = function() {

    adding to jQuery.fn adds functions that can be called from jQuery objects, i.e. allowing, say,

    $("div").responsive();

    For some reason these functions are also added to the jQuery object itself, so it still works, but the latter makes the function’s purpose more clear and keeps the jQuery class clean.

    • 0