Extending a jQuery UI Accordion with a close button - binding an event handler

Question

I'm trying to extend the jQuery UI Accordion widget with a close button on some menu headers, like this:

I've added the close button using a font-awesome icon, so the HTML looks roughly like this:

<div id="main-menu" data-menucloser="urltohandlecleanup">
    <div>
        <div class="clear-fix">
            <div style="float: left;">System Management</div>
            <div style="float: right;">&nbsp;</div>
        </div>
    </div>
    <div><ul>
        <li><a href="url">Sub Menu Item 1</a></li>
        <li><a href="url">Sub Menu Item 2</a></li>
    </ul></div>
    <div>
        <div class="clear-fix">
            <div style="float: left;">My Tenant</div>
            <div style="float: right;">&nbsp;</div>
        </div>
    </div>
    <div><ul>
        <li><a href="url">Sub Menu Item 1</a></li>
        <li><a href="url">Sub Menu Item 2</a></li>
    </ul></div>
    <div>
        <div class="clear-fix">
            <div style="float: left;">Green Account</div>
            <div style="float: right;"><i class="fa fa-times-circle menu-closer" data-close="thing to close"></i></div>
        </div>
    </div>
    <div><ul>
        <li><a href="url">Sub Menu Item 1</a></li>
        <li><a href="url">Sub Menu Item 2</a></li>
    </ul></div>
</div>

I've set up my jQuery to attach a click event to the close button, like this:

$(function() {
    $("#main-menu").on("click", ".ui-accordion .menu-closer", function() {

        var url = $("#main-menu").attr("data-menucloser");
        var payload = $.param({ close: $(this).attr("data-close") });
        var itemToClose = $(this).closest(".ui-accordion-header");
        $.ajax({
            url: url,
            type: "POST",
            data: payload,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            dataType: "json"

        }).done(function(data) {
            if (data.result == "done") {
                itemToClose.next().remove();
                itemToClose.remove();

            }
        });
    });
});

However, my click event handler doesn't get hit. I'm guessing because it's overriden by the widget itself with a preventDefault()... so how can I attach an event handler to my icon?

Answer 1

Check this JSFIDDLE.

this should Help.