Làm cách nào để bạn liên kết trình xử lý sự kiện với trình đơn thả xuống tùy chỉnh khung nền tảng Zurb Foundation?

Question

Tôi đang sử dụng khung công tác Zurb Foundation và có phần tử chọn nơi khung tiêm HTML cho phần tử chọn tùy chỉnh (trình đơn thả xuống tùy chỉnh bên dưới).

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

Làm cách nào để gắn trình xử lý sự kiện jQuery vào menu thả xuống tùy chỉnh vì nó được chèn khi đang tải trang? Nếu tôi liên kết một trình xử lý sự kiện .change() với phần tử chọn ban đầu, nó sẽ không được kích hoạt. Tôi có giả định rằng sẽ có phần tử div w/lớp "tùy chỉnh thả xuống" ngay sau phần tử chọn không? Cách tiếp cận đó có vẻ như nó có thể là w/vấn đề tiềm năng nếu khuôn khổ thay đổi.

Answer 1

Binding đến chọn phần tử gốc làm việc hoàn toàn tốt đẹp cho tôi

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

Answer 2

Với Foundation 5.4.5, điều này đang làm việc cho tôi:

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