擴展一個jQuery UI的手風琴與關閉按鈕 - 結合事件處理程序

Question

我想對一些菜單標題有一個關閉按鈕延長jQuery UI的摺疊菜單，就像這樣：

我「已經使用字體真棒圖標添加了關閉按鈕，這樣的HTML如下大致是這樣的：

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

我已經設置了我的jQuery的單擊事件附加到關閉按鈕，這樣的：

$(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。

this should Help.