开发者

jQuery buttons not working after loading ajax a second time?

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?


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
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜