$(document).ready(function() {
$('[id^=drop_id]').on('change', function() {
selected = $(this).find('option:selected').data('tid')
$.getJSON('path/'+selected,function(data){
var s = $("<select id='drop_id_goddamnit' name=\"name\" />");
$(data).each(function() {
var option = $('<option />');
option.attr('value', this.taxon.permalink).text(this.taxon.name).attr('data-tid',this.taxon.id);
option.appendTo(s);
});
$('#header').append($(s));
});
});
});
This snippet of code is designed to dynamically add a dropdown based on the value selected in an existing dropdown. The new dropdown also has the same change event listener to generate another dropdown. However, there seems to be an issue as the dynamically generated select box is not triggering the event. What should be done to resolve this problem?