jQuery событие отмены привязки, когда отображается максимальное количество детей

Question

У меня есть форма личных данных, которая позволяет вам ввести определенное количество иждивенцев, которое определяется приложением JSP.

Первый иждивенец виден, и пользователь может добавить иждивенцев до максимального числа. Все остальные иждивенцы по умолчанию скрыты и отображаются, когда пользователь нажимает кнопку «Добавить еще одну зависимую кнопку».

Когда достигнуто максимальное количество иждивенцев, кнопка становится серой, и через jQuery генерируется сообщение, которое показывает пользователю именно это.

Проблема, с которой я сталкиваюсь, заключается в том, что при достижении максимального числа зависимых лиц отображается сообщение, но затем пользователь может нажать кнопку, чтобы добавить больше зависимых элементов, и сообщение продолжает генерироваться.

Я думал, что отмена привязки события клика приведет к сортировке, но, похоже, он все еще сможет генерировать второе сообщение.

Вот функция, которую я написал для генерации сообщения:

    // 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."));
}

Существует гиперссылка с прикрепленным событием клика, например:

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

Весь код файлов cookie предназначен для сохранения состояния, когда пользователи переходят назад и вперед по этому процессу.

Answer 1

Убедитесь, что он действительно считает ваши скрытые div, отладьте с помощью console.log($hiddenChildren); или alert($hiddenChildren);. Кроме того, вам действительно не нужно отвязывать функцию и связывать ее снова. Просто используйте return false; вместо $(this).unbind("click");. Дело в том, что я не уверен, что :hidden соответствует элементам, которые имеют display: hidden; или они должны быть скрыты с .hide();. Имейте в виду, что :hidden также соответствует <input type="hidden" />, поэтому, если у вас есть такой фильтр, используйте :not(). Надеюсь, это поможет вам решить вашу проблему.