イベントハンドラをZube Foundationフレームワークのカスタムドロップダウンにどのようにバインドしますか？

Question

私はZurb Foundationフレームワークを使用しており、フレームワークがカスタム選択要素（以下のカスタムドロップダウン）用にHTMLを注入するselect要素を持っています。それはオンザフライページのロード時に挿入しているので、私はカスタムドロップダウンにjQueryのイベントハンドラをバインドするにはどうすればよい

<select id="caseModule" style="display: none;"> 
    <option value="gifting">Gifting</option> 
    <option value="other">Other</option> 
</select> 
<div class="custom dropdown" style="width: 97px;"> 
    <a href="#" class="current">Other</a> 
    <a href="#" class="selector"></a> 
    <ul style="width: 95px;"> 
    <li>Gifting</li> 
    <li class="selected">Other</li> 
    </ul> 
</div> 

？ .change（）イベントハンドラを元のselect要素にバインドすると、そのイベントハンドラは起動されません。 select要素の直後に "custom dropdown"クラスを持つdiv要素があると仮定しますか？このアプローチは、フレームワークが変更された場合に潜在的な問題が発生する可能性があるようです。オリジナルの選択要素への結合

Answer 1

は私が財団5.4.5で

$(document).ready(function() { 
    $('#caseModule').change(function() { 
     console.log('changed'); 
    }); 
}); 

Answer 2

、これは私のために働いているために完全に正常に動作します：

$('.dropdown').on('opened.fndtn.dropdown', function() { 
    return console.log('opened'); 
}); 
$('.dropdown').on('closed.fndtn.dropdown', function() { 
    return console.log('closed'); 
});