jQuery unbinding click event when maximum number of children are displayed

Question

I have a personal details form that alows you to enter a certain number of dependants which is determined by the JSP application.

The first dependant is visible and the user has the option to add dependants up to the maximum number. All other dependants are hidden by default and are displayed when a user clicks the 'Add another dependant button'.

When the maximum number of dependants has been reached the button is greyed out and a message is generated via jQuery and displayed to tell the user exactly this.

The issue i am having is when the maximum number of dependants has been reached the message is displayed but then the user can click the button to add more dependants and the message keeps on generating.

I thought unbinding the click event would sort this but it seems to still be able to generate a second message.

Here is the function i wrote to generate the message:

    // Dependant message function
function maxDependMsg(msgElement) {
    // number of children can change per product, needs to be dynamic
    // count number of dependants in HTML           
    var $dependLength = $("div.dependant").length;  

    // add class maxAdd to grey out Button
    // create maximum dependants message and display, will not be created if JS turned off
    $(msgElement)
    .addClass("maxAdd")
    .after($('<p>')
    .addClass("maxMsg")
    .append("The selected web policy does not offer cover for more than " + $dependLength + " children, please contact our customer advisers if you wish discuss alternative policies available."));
}

There is a hyperlink with a click event attached like so:

    $("a.add").click(function(){

    // Show the next hidden table on clicking add child button
    $(this).closest('form').find('div.dependant:hidden:first').show();

    // Get the number of hidden tables
    var $hiddenChildren = $('div.dependant:hidden').length;

    if ($hiddenChildren == 0) {

        // save visible state of system message 
        $.cookies.set('cpqbMaxDependantMsg', 'visible');

        // show system message that you can't add anymore dependants than what is on page
        maxDependMsg("a.add");

        $(this).unbind("click");

    } 

    // set a cookie for the visible state of all child tables   
    $('div.dependant').each(function(){

        var $childCount = $(this).index('div.dependant');

        if ($(this).is(':visible')) {
            $.cookies.set('cpqbTableStatus' + $childCount, 'visible');
        } else {
            $.cookies.set('cpqbTableStatus' + $childCount, 'hidden');       
        }

    });

    return false;
});

All of the cookies code is for state saving when users are going back and forward through the process.

Answer 1

Make sure it really counts your hidden divs, debug with console.log($hiddenChildren); or alert($hiddenChildren);. Also you really don't need to unbind the function and bind it again. Just use return false; instead $(this).unbind("click");. Thing is i'm not sure :hidden matches elements that just have display: hidden; or they have to be hidden with .hide();. Keep in mind that :hidden also matches <input type="hidden" /> so if you have such filter them using :not(). Hope this helps you resolve your problem.