javascript - How to add another click function after criteria are met

Question

I have a form where people are essentially booking rooms. they have one room instantly available and then there are 2 hidden (inputs disabled) fieldsets below. With a view to be able to add any number of extra room fieldsets in the future, want to be able to change the function of the click event once all the current extra rooms are visible (ie. control the visibility of a separate div/link that would link to a large groups booking page).

i hope that makes sense.

if you need the html just ask but here is what i have so far:

$('.add-room').on('click', 'a', function(event){

    event.preventDefault();
    var next_to_show = $('#homepage-search-form .extra-room:hidden:first');

    $(next_to_show).slideDown(500);
    $(next_to_show).find('select').prop('disabled',false);

    var total_extra_rooms = $('.extra-room').length;
    var extra_rooms_visible = $('.extra-room:visible').length;

    if (total_extra_rooms == extra_rooms_visible) {
        $('.add-room').addClass('test');
    }

});

$(document).on('click', '.test', function(){
    //new click function here
});

The problem I have is that once the total_extra_rooms is equal to the extra_rooms_visible variable the .test function is called. I want it to be called on the next click of the .test element.

Another thing to be aware of is that once an extra room fieldset is visible it contains a link that can remove it should the user change their mind.

Any help would be fantastic.

Answer 1

你可以这样做：

if (total_extra_rooms == extra_rooms_visible) {
    setTimeout(function() {
        $('.add-room').addClass('test');
    }, 0);
}

这将等到当前操作之后添加test类。