Question

我目前正在通过ajax加载数据，一旦成功，将调用以下jQuery函数：

$(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");
        }
    });     
});

这给出了一些可点击打开和关闭html的按钮：

<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>

单击按钮时，类会更改以显示已选中该函数，并且函数goFilter将使用单击的值运行。（nb。可以点击多个）。

现在当我重新加载ajax数据时（nb重新加载数据是通过另一个选择而不是刷新页面），上面的函数再次运行，并且已经选择的按钮仍然被选中，但现在你不能点击/关闭按钮，函数goFilter停止工作。理想情况下，当重新加载ajax时，我希望所有按钮都处于关闭状态（未选中），当然goFilter函数在点击时可以运行吗？

Answer 1

嗯，我想我已经明白你要做的事了。尝试更改此行：

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

...进入这些：

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

第二次加载ajax后jQuery按钮无法正常工作？

1 个答案: