Skip to content

Instantly share code, notes, and snippets.

@jamesnw

jamesnw/Dropkick-events.html

Last active August 29, 2015 14:24
Show Gist options
  • Save jamesnw/f98fe067a48ac2922143 to your computer and use it in GitHub Desktop.
Save jamesnw/f98fe067a48ac2922143 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstrates that dropkicked selects do not bubble events as expected
Raw
Dropkick-events.html
<html>
<head>
<!-- Optional theme -->
<link rel="stylesheet" href="https://rawgit.com/Robdel12/DropKick/master/build/css/dropkick.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://rawgit.com/Robdel12/DropKick/master/build/js/dropkick.2.1.5.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#dropkick-form select').dropkick();
jQuery('select').change(function(e) {
$('#output').append("select changed<br/>");
});
jQuery('.nested-1').change(function(e) {
$('#output').append("nested-1 changed<br/>");
});
jQuery('.nested-2').change(function(e) {
$('#output').append("nested-2 changed<br/>");
});
jQuery('.nested-3').change(function(e) {
$('#output').append("nested-3 changed<br/>");
});
jQuery('form').change(function(e) {
$('#output').append("form changed<br/>");
});
});
</script>
</head>
<body>
<form class="auto-submit" action="#" method="get" id="dropkick-form">
<div class="nested-1">
<label for="edit-field-included-media-value">Multimedia</label>
<div class="nested-2">
<div class="nested-3">
<select>
<option value="All">- Any -</option>
<option value="Audio">Audio</option>
<option value="Gallery">Gallery</option>
<option value="Video">Video</option>
</select>
</div>
</div>
</div>
</form>
<form class="auto-submit" action="#" method="get" id="non-dropkick-form">
<div class="nested-1">
<label for="edit-field-included-media-value">Multimedia</label>
<div class="nested-2">
<div class="nested-3">
<select>
<option value="All">- Any -</option>
<option value="Audio">Audio</option>
<option value="Gallery">Gallery</option>
<option value="Video">Video</option>
</select>
</div>
</div>
</div>
</form>
<div id="output"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment