JQuery: Event handlers stop working when window is resized

Question

JSFiddle link: http://jsfiddle.net/4QLDC/6

This is my JS code:

var toggleContent = function (event) {
    $(event.target).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 980) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");
        $(".headBar1").on("click", toggleContent);
    }
    else {
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");
        $(".headBar1").off("click", toggleContent);
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

This is what I am trying to achieve.

When the window width is less than 300px:

1. The content box should collapse
2. The headings should become links
3. When a heading is clicked, its content box should toggle

The first two are happening, but the third one is what I am having trouble with. Some of the time it works and some of the time it doesn't (the behaviour is unpredictable; in the JSFiddle page if you try resizing the "Result" frame 6-7 times, it will work fine the first six times but fail the seventh time). What am I doing wrong? How to fix this?

Answer 1

Another approach that's more fitting in this new era of awesome browser would be to use @media (max-width: 300px) . All modern browser can use this, and it simply applies specific css rules.

/* Define css rules for when the windows is wider than 300px */

@media (max-width: 300px) {
    /* Set parent's min height and such */
    /* display: none and display: block relevant content */

    .headBar {
        cursor: pointer;
    }
}

I personally use this approach to make the site viewable through mobile phones and smaller windows, and it works perfectly once you get a hang of it.

Most changes you do are relevant to css anyways. All you need to do is have a good structure of classes and such, which you should have regardless.

Answer 2

var toggleContent = function (event) {
    $(event.target).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    $(".headBar1").off("click");
    if (windowWidth < 300) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");        
        $(".headBar1").on("click", toggleContent);
    }
    else {        
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");       
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

Is that what you wanted ?

Answer 3

Here you go. Fiddle: http://jsfiddle.net/4QLDC/8/

function toggleContent(ths) {
    console.log('toggle!');
    $(ths).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 300) {
        console.log('Under: ' + windowWidth)
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");
        $(".headBar1").on("click.toggle", function(){ toggleContent(this); });
    } else {
        console.log('Over: ' + windowWidth)
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");
        $(".headBar1").off("click.toggle");
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

---

I want beyond and moved styles all into the CSS so that only one class has to be added and removed, and not multiple CSS properties. Fiddle: http://jsfiddle.net/4QLDC/12/

CSS:

 .botContentBox { min-height: 200px; float:left; clear:none; border: 1px solid grey; margin: 0 10px 10px 0 } .headBar1 { cursor: default; background-color: #880000; border:5px solid #fff; color:#fff; font-size:17px; line-height:17px; padding:10px 10px; width:auto; margin:0 0 5px 0 } .botContentBox.lt300{ min-height: 0px; } .botContentBox.lt300 .headBar1{ cursor: pointer; } .botContentBox.lt300 .botContentHolder{ display: none } 

JS:

 var showOrHidePanels = function () { var windowHeight = $(window).height(); var windowWidth = $(window).width(); if (windowWidth < 300) { console.log('Under: ' + windowWidth) $(".headBar1").parent().addClass('lt300'); $(".headBar1").on("click.toggle", function(){ $(this).siblings().toggle(); }); } else { console.log('Over: ' + windowWidth) $(".headBar1").siblings().show(); // in case it was toggled on/off $(".headBar1").parent().removeClass('lt300'); $(".headBar1").off("click.toggle"); } }; $(function () { showOrHidePanels(); }); $(window).resize(function () { showOrHidePanels(); });