Check this JSFIDDLE.
this should Help.
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;"> </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;"> </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?
La solution
Check this JSFIDDLE.
this should Help.