jQuery buttons not working after loading ajax a second time?

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?

Simeon · Accepted Answer · 2011-07-12 22:55:09Z

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

answered Jul 12, 2011 at 22:55

Simeon

5,5793 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dino Over a year ago

Thank you, unbind is exactly what I needed to get the buttons to work again, after reloaded ajax content. The triggers did not work for the script above (they do work in general). The script above does not require the mouseup function, everything is handled by the mousedown function. I used: $('.fg-button.ui-state-active').removeClass("ui-state-active"); to remove the down state this is called when the reload ajax content is invoked. Thanks

Collectives™ on Stack Overflow

jQuery buttons not working after loading ajax a second time?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related