LeftNavButton change dynamic button background image

I try to change the background image of a LeftNavButton after a click, but nothing happens. When I do this with a normal button the image will change. Are there some restrictions in doing that or is there another way to do that?

index.xml:

<Alloy>
    <NavigationWindow id="win1" platform="ios">
        <Window id="win2" title="Window">
            <LeftNavButton>
                <Button id="navButtonFilter" class="navButtonFilter" onClick="doClick" platform="ios" autoStyle="true">XX</Button>
            </LeftNavButton>
 
            <Button id="button" class="navButtonFilter" onClick="doClick"> </Button>
        </Window>
    </NavigationWindow>
</Alloy>

index.js:

function doClick(event) {
    Ti.API.info('doClick');
    $.addClass($.navButtonFilter, 'navButtonFilterActive');
    $.addClass($.button, 'navButtonFilterActive');
}
 
$.win1.open();

"#win1": {
    backgroundColor:"white"
}
 
".navButtonFilter": {
    backgroundImage : "/filter.png",
}
 
".navButtonFilterActive": {
    backgroundImage : "/list.png",
}