jQuery On <select> Change Event Not Firing

I have the following in the header:

$('body').on('change', '#userFilter', function(){
   console.log('changed');
});

And this element is dynamically inserted on the page when a tab is clicked:

<select id="userFilter">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

The problem is that when I change the dropdown nothing is shown in the console.