Question

I am currently loading data via ajax, upon its success the following jQuery function is called:

$(function(){
    //all hover and click logic for buttons
    $(".fg-button:not(.ui-state-disabled)")
    .hover(
        function(){ 
            $(this).addClass("ui-state-hover"); 
        },
        function(){ 
            $(this).removeClass("ui-state-hover"); 
        }
    )
    .mousedown(function(){
        $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
        if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
        else {$(this).addClass("ui-state-active");}
        $(".fg-buttonset").each(function() {
            var args = $(this).find(".ui-state-active").map(function() {
                return $(this).text();
            });
            var filterValues = $.makeArray(args).join("|");
            goFilter(filterValues, 4);

        });
    })
    .mouseup(function(){
        if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
            $(this).removeClass("ui-state-active");
        }
    });     
});

This gives some buttons which are clickable on and off the html for this is:

<div class="fg-buttonset fg-buttonset-multi">
<button class="fg-button ui-state-default">Small</button>
<button class="fg-button ui-state-default">Medium</button>
<button class="fg-button ui-state-default">Large</button>
</div>

When a button is clicked the class changes to show that it has been selected and the function goFilter runs with the clicked value. (nb. more than one can be clicked).

Now when I reload the ajax data (nb the reloading of data is by making another selection and not refreshing the page) the function above runs again, and the buttons which had been selected remain selected, but now you cannot click on / off the buttons, and the function goFilter stops working. Ideally when the ajax is reloaded I would like the buttons to all be on the off state (not selected) and of course the function goFilter to run upon clicking can anyone help?

Answer 1

Hm, I think I’ve understood what you’re trying to do. Try changing this line:

$(".fg-button:not(.ui-state-disabled)")

… into these:

$(".fg-button:not(.ui-state-disabled)")
    .trigger('mouseout').trigger('mouseup') // default/off state
    .unbind() // remove any attached event handlers