jQuery .on() Method Not Detecting Future Elements

jQuery .on() Method Not Detecting Future Elements

I'm trying to use jQuery in order to populate one dropdown based on the
selection of the dropdown before it, like so:

This works fine for the first row, however I'm using WordPress' Gravity
Forms plugin to let me add subsequent rows. My jQuery script seems to get
completely ignored by any dropdowns that are added after the page is
loaded.
Here is how I'm using the method:
$('#form-register .gfield_list tr td:first select').on('change', function() {
var fieldBrand = $(this).parent().next().find('select');
alert('1');
The '1' is only alerted in the select field in the first row, no others.
You can see the web page (with the full jQuery script) here: -
http://www.mattpealing-server.co.uk/~devappli/register/
Can anyone see what I'm doing wrong? I see no errors in Firefox's Error
Console.
Also I'm having the same problem with the tooltips I've applied to the +/-
icons, these aren't as important but I imagine the cause of the problem is
the same.