6

Zurb Foundationフレームワークを使用していて、フレームワークがカスタムselect要素のHTMLを挿入するselect要素があります（下のカスタムドロップダウン）。

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

ページの読み込み時にオンザフライで挿入されるため、jQueryイベントハンドラーをカスタムドロップダウンにバインドするにはどうすればよいですか？.change（）イベントハンドラーを元のselect要素にバインドすると、起動されません。select要素の直後に「カスタムドロップダウン」クラスを持つdiv要素があると思いますか？そのアプローチは、フレームワークが変更された場合、潜在的な問題を伴う可能性があるように思われます。

4

2 に答える 2

5

Foundation 5.4.5 では、これでうまくいきました。

$('.dropdown').on('opened.fndtn.dropdown', function() {
  return console.log('opened');
});
$('.dropdown').on('closed.fndtn.dropdown', function() {
  return console.log('closed');
});
于 2014-12-05T20:12:36.327 に答える
2

元の選択要素へのバインドは、私にとっては完全にうまく機能します

$(document).ready(function () { 
    $('#caseModule').change(function () {
        console.log('changed');
    });
});
于 2013-02-24T17:34:16.210 に答える