On change event for aui-dropdown2 with checkboxes

Hi there,
i like to fire an event on changes of checkboxes within a dropdown2.
My dropdown:

<a href="#dropdown-trigger" aria-owns="dropdown" aria-haspopup="true" class="aui-button aui-style-default aui-dropdown2-trigger">
    Dropdown Trigger
</a>
<div id="dropdown" class="aui-dropdown2 aui-style-default">
    <div id="sectionone" class="aui-dropdown2-section">
        <div class="aui-dropdown2-heading aui-dropdown2-checkbox interactive checked">
            Heading1
        </div>
        <ul>
             #foreach($value in $values)
                <li>
                    <a class="aui-dropdown2-checkbox interactive">$value</a>
                </li>
            #end
        </ul>
    </div>
    <div id="sectiontwo" class="aui-dropdown2-section">
        <div class="aui-dropdown2-heading aui-dropdown2-checkbox interactive">
            Heading2
        </div>
        <ul>
            #foreach($othervalue in $othervalues)
                <li>
                    <a class="aui-dropdown2-checkbox interactive">$othervalue</a>
                </li>
            #end
        </ul>
    </div>
</div>

I tried this:

AJS.$("#dropdown").on({
    "aui-dropdown2-item-check": function() {
       doSomething();
    },
    "aui-dropdown2-item-uncheck": function() {
        doSomething();
    }
});

“doSomething” is executed successfully and unchecked checkboxes can functionally be checked. However the “checked” icon does not appear if an unchecked item is clicked. Also, all checked items cannot be unchecked. Neither disappears the icon, nor is the item functionally unchecked when clicked.
Is this a good way to implement an “on change” event or is there a better solution? Whats the best way to fix this?

Thanks in advance

EDIT: seems like I have broken something else…

2 Likes

Working fine now, my xml file was the problem.

2 Likes