닫기 버튼으로 jQuery를 UI 아코디언을 확장 - 이벤트 핸들러

Question

나는 일부 메뉴 헤더에 닫기 버튼으로 jQuery를 UI 아코디언 위젯을 확장하기 위해 노력하고있어 바인딩이 같은 :

I을 '글꼴 - 멋진 아이콘을 사용하여 닫기 버튼을 추가 한, 그래서 HTML은 다음과 같이 대략 모양 :이처럼, 닫기 버튼에 클릭 이벤트를 붙이는 내 jQuery를 설정 한

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

:

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

      } 
     }); 
    }); 
}); 

그러나 내 클릭 이벤트 처리기가 발생하지 않습니다. 그것은 위젯 자체가 preventDefault()를 사용하여 재정의 되었기 때문에 짐작할 수 있습니다 ... 어떻게 아이콘에 이벤트 핸들러를 붙일 수 있습니까?

Answer 1

확인하십시오. JSFIDDLE