jQuery .click() function with .attr()

Question

I'm trying to resize div1 with the click function depending if menuright is visible.

I need help with the $('a#hidediv').click(function ().

Right now, only thea#showdiv selector is functioning.

function mySetupFunction() {
    var one = $('#wrapper_content').width();
    var two = $('#menurigth').width();
    var remaining_width = parseInt($(window).width());

    $('#menurigth').hide();
    $('#div1').css('width', remaining_width);

    $('a#showdiv').click(function () {
        $('#menurigth').animate({ width: 'toggle' });
        $('#div1').css('width', remaining_width - two);
        $('a#showdiv').attr('id', 'hidediv')
    });

    $('a#hidediv').click(function () {
        $('#menurigth').hide();
        $('#div1').css('width', remaining_width);
        $('a#hidediv').attr('id', 'showdiv')
    });
}

$(document).ready(mySetupFunction);
$(window).resize(mySetupFunction);

Answer 1

When you change the id on an element (which arguably isn't a good thing to do anyway, but that's beside the point), you don't change the event handlers that are bound to it. The same click handler is still on that element.

Instead of binding to the elements, use event delegation and bind to a common parent. Then you don't need to change the handler because the identity of the element will follow the click event. Something like this:

$(document).on('click', 'a#showdiv', function () {
    // your code
});

$(document).on('click', 'a#hidediv', function () {
    // your code
});

As the id changes, any time document receives the click event it will examine the current id of the element which invoked the event, so it will use the correct handler.

The main thing to learn here is that while the code inside the click handler runs any time the element is clicked, the code which assigns the click handler ($('something').click(someFunction);) runs only once when the page initially loads, and it assigns the handler to elements which match the selector at that time only.

Answer 2

Rearrange the code like this,

var remaining_width = parseInt($(window).width());
function mySetupFunction() {
    remaining_width = parseInt($(window).width());
    var one = $('#wrapper_content').width();
    var two = $('#menurigth').width();

    $('#menurigth').hide();
    $('#div1').css('width', remaining_width);
}
$(document).ready(function () {
    $('a#showdiv').click(function () {
        $('#menurigth').animate({ width: 'toggle' });
        $('#div1').css('width', remaining_width - two);
        $('a#showdiv').attr('id', 'hidediv')
    });

    $('a#hidediv').click(function () {
        $('#menurigth').hide();
        $('#div1').css('width', remaining_width);
        $('a#hidediv').attr('id', 'showdiv')
    });
    mySetupFunction();
});

$(window).resize(function () { mySetupFunction(); });

Answer 3

With the input of both David and Annop's answers here is the fully working code:

<script type="text/javascript">

    var remaining_width = parseInt($(window).width());
    var one = $('#wrapper_content').width();
    var two = $('#menurigth').width();

function mySetupFunction() {
    $('#menurigth').hide();
    $('#div1').css('width', remaining_width);
}

$(document).ready(function () {
    $(document).on('click', 'a#showchat', function () {
        $('#menurigth').animate({ width: 'toggle' });
        $('#div1').css('width', remaining_width - two);
        $('a#showchat').attr('id', 'hidechat')
    });

    $(document).on('click', 'a#hidechat', function () {
        $('#menurigth').animate({ width: 'toggle' });
        $('#div1').css('width', remaining_width);
        $('a#hidechat').attr('id', 'showchat')
    });
    mySetupFunction();
});

$(window).resize(function () { mySetupFunction(); });



</script>