use delegation to attach change event to form_category so it survives being repopulated

1 files changed, 9 insertions, 5 deletions

diff --git a/web/js/southampton.js b/web/js/southampton.js
index 1f3e16105..290a294ae 100644
--- a/web/js/southampton.js
+++ b/web/js/southampton.js
@@ -20,8 +20,11 @@ $(function(){
             input.val(input.attr('placeholder'));
         }
     }).blur();
-
-    $('#form_category').change(function(){
+        
+    // use on() here because the #form_category may be replaced 
+    // during the page's lifetime
+    $("#problem_form").on("change.southampton", "select#form_category", 
+      function() {    
         var category = $(this).val();
         if ('Potholes' == category) {
             if (!$('#potholes_extra').length) {
@@ -39,12 +42,13 @@ $(function(){
                 '<option>Deeper than a tennis ball' +
                 '</select></div></div>';
                 $('#form_title').closest('div.form-field').after(qns);
-            }
+            } 
             $('#potholes_extra').show('fast');
         } else {
             $('#potholes_extra').hide('fast');
-        }
-    }).change();
+        }   
+    }
+    ).change(); // change called to trigger (in case we've come in with potholes selected)
 
 });