Question

我有一份个人详细信息表格，允许您输入由JSP应用程序确定的一定数量的家属。

第一个依赖项是可见的，用户可以选择将依赖项添加到最大数量。默认情况下隐藏所有其他依赖项，并在用户单击“添加另一个依赖项按钮”时显示。

当达到最大家属数量时，该按钮显示为灰色，并通过jQuery生成一条消息并显示以准确告诉用户。

我遇到的问题是，当达到最大家属数时，会显示该消息，但用户可以单击该按钮添加更多家属，并且该消息会继续生成。

我认为取消绑定click事件会对此进行排序，但似乎仍然可以生成第二条消息。

这是我写的用于生成消息的函数：

    // 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()进行过滤，则会{.1}}。希望这可以帮助您解决问题。

当显示最大子项数时，jQuery解除绑定点击事件

1 个答案: